iterate keys and values in multiple dictionaries by angularjs

Question

I've got a json file contains few different dictionaries. It looks like this:

{
  "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
  }
}

I want to put the data from variable_1, variable_2 and variable_3 in different columns of a table. Any variable has the same number of items and the number of them is unknown (it could be 1,2,3,5,8...). The keys are the same in all dictionaries. So new <td> should contains only value from another dictionary.

I wrote the code to iterate through one dictionary but I can't find approach to multiple dictionaries.

That's my code for only one dictionary. How should I modify it to handle a few?

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

Answer 1

If keys in each directory are related to each other, you can simply

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

Answer 2

You might want to share your filters (I did remove them here):

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>

I did play around a little with that data... and added a custom filter, see jsFiddle