通过angularjs迭代多个字典中的键和值

iterate keys and values in multiple dictionaries by angularjs

本文关键字：键和值 字典 angularjs 迭代 通过      更新时间：2023-09-26

我有一个json文件，其中包含一些不同的字典。它看起来像这样：

{
  "variable_1": {
    "1357840800": 74,
    "1360519200": 71,
    "1362938400": 83,
    "1365616800": 74,
    "1368208800": 78
  },
  "name": "TITLE",
  "variable_2": {
    "1357840800": 25817,
    "1360519200": 28585,
    "1362938400": 26946,
    "1365616800": 30034,
    "1368208800": 23316
  },
  "link": "title.html",
  "variable_3": {
    "1357840800": 1910483,
    "1360519200": 2029593,
    "1362938400": 2236587,
    "1365616800": 2222556,
    "1368208800": 1818661
  }
}

我想把variable_1, variable_2 and variable_3中的数据放在表的不同列中。任何变量都有相同数量的项，并且它们的数量是未知的（可能是1,2,3,5,8…）。所有字典中的键都是相同的。所以新的<td>应该只包含来自另一个字典的值。

我编写代码是为了遍历一个字典，但我找不到访问多个字典的方法。

这是我只为一本字典编写的代码。我应该如何修改它来处理一些？

<table class="table ng-cloak" ng-if='isActive'  ng-repeat="item in data | filter:isActive">
  <thead>
    <tr>
      <th>#</th>
      <th>Date</th>
      <th>Value</th>
    </tr>
 </thead>
 <tbody>
   <tr ng-repeat='(key, val) in item.variable_1'>
     <td>{{ $index }}</td>
     <td>{{ 1000*key + 1 | date:'MM.yyyy'}}</td>
     <td>{{ val  | splitdivisions }}</td>
   </tr>
 </tbody>
</table>

如果每个目录中的键彼此相关，则可以简单地进行

<tr ng-repeat='(key, val) in item.variable_1'>
 <td>{{ $index }}</td>
 <td>{{ 1000*key + 1 | date:'MM.yyyy'}}</td>
 <td>{{ val  | splitdivisions }}</td>
 <td>{{  item.variable_2[key] }}</td>
 <td>{{  item.variable_3[key] }}</td>

你可能想分享你的过滤器（我确实在这里删除了它们）：

function MyCtrl($scope) {
  $scope.data = {
    "variable_1": {
      "1357840800": 74,
      "1360519200": 71,
      "1362938400": 83,
      "1365616800": 74,
      "1368208800": 78
    },
    //"name": "TITLE",
    "variable_2": {
      "1357840800": 25817,
      "1360519200": 28585,
      "1362938400": 26946,
      "1365616800": 30034,
      "1368208800": 23316
    },
    //"link": "title.html",
    "variable_3": {
      "1357840800": 1910483,
      "1360519200": 2029593,
      "1362938400": 2236587,
      "1365616800": 2222556,
      "1368208800": 1818661
    }
  };
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
<div ng-controller="MyCtrl">
  <table class="table" ng-repeat="(key, value) in data">
    <thead>
      <tr>
        <th>#</th>
        <th>Date</th>
        <th>Value</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat='(k, val) in value'>
        <td>{{ $index }}</td>
        <td>{{ 1000*k + 1 | date:'MM.yyyy'}}</td>
        <td>{{ val }}</td>
      </tr>
    </tbody>
  </table>
</div>
</div>

我确实玩了一些数据。。。并添加了一个自定义过滤器，请参阅jsFiddle

相关文章：