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

时间:2016-05-12 07:08:01

标签: javascript angularjs

我有一个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>

2 个答案:

答案 0 :(得分:2)

如果每个目录中的密钥彼此相关,您可以简单地

<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>

答案 1 :(得分:0)

你可能想要分享你的过滤器(我确实在这里删除了它们):

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