Angular forEach over Mixed JSON Nests

Question

I am finding it very difficult to re-define the return information so that it is suitable for ng-repeat to iterate over it in the view.

I have two views one for an index that i want the year-month to encompass the countries (might be 1+ or none) and then inside each country i want the name of each event (again could be 1+ or none). The second view i just want to pass the event details and will be calling these details by passing the event index number in order to return all the event details (name, mname, net).

The Data:

{
months: [
  {
  index: 201602,
  year: "2016",
  mon: "February",
  country1: [
  {
    index: 12345678,
    l: [
      {
      name: "Test1",
      mname: "Test 1",
      net: "February 10, 2016 11:39:00 UTC",
      }
    ]
    },
    {
    index: 23456789,
    l: [
      {
      name: "Test2",
      mname: "Test 2",
      net: "February 10, 2016 11:39:00 UTC",
      }
    ]
    }
  ],
  country2: [ ]
},
{
index: 201603,
year: "2016",
mon: "March",
country1: [
{
    index: 546547657654,
    l: [
      {
      name: "Test1",
      mname: "Test 1",
      net: "March 10, 2016 11:39:00 UTC",
      }
    ]
}
],
country2: []
},
{
index: 201604,
year: "2016",
mon: "April",
country1: [ ],
country2: [
{
    index: 78676756,
    l: [
      {
      name: "Test1",
      mname: "Test 1",
      net: "April10, 2016 11:39:00 UTC",
      }
    ]
}
]
}
]
}

Answer 1

In order for ng-repeat to work, you'll have to extract the country data in some another array (transform the initial data somehow).

If those country fields have consistent naming (like 'country' infix on each of them), you can extract them into their own array and use ng-repeat to iterate over it.

Here is working solution. It assumes that country arrays all have the word 'country' in their name:

function MyCtrl($scope) {
    $scope.countriesData = prepData(sampleData);

    function prepData(data) {
      return data.months.map(function(yearMonth) {
        var transformed = { yearMonth: yearMonth, countries: [] };
        for (var key in yearMonth) {
            if (key.indexOf('country') != -1) {
                transformed.countries.push(yearMonth[key]);
            }
        }
        return transformed;
      });
    }
}

var sampleData = {
    months: {
         //...
    }
}

The solution takes the data you've provided and transforms it into an array of entries like this one: { yearMonth: yearMonth, countries: [] };

You'll just have to render them like this:

<div ng-controller="MyCtrl">
<ul>
  <li ng-repeat="entry in countriesData">
    ym-id: {{entry.yearMonth.index}}
    <ul>
      <li ng-repeat="country in entry.countries">
        <ul>
          <li ng-repeat="event in country">
            event-id: {{event.index}}
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>
</div>

You can check the fiddle here: http://jsfiddle.net/tvy4jbvs/