Angular forEach over Mixed JSON Nests

Angular forEach over Mixed JSON Nests

本文关键字：JSON Nests Mixed over forEach Angular      更新时间：2023-09-26

我发现很难重新定义返回信息，以便它适合ng-repeat在视图中迭代它。

我有两个视图，一个是我希望年月包含国家/地区的索引(可能是 1+ 或没有(，然后在每个国家/地区内，我想要每个事件的名称(再次可能是 1+ 或没有(。第二个视图我只想传递事件详细信息，并将通过传递事件索引号来调用这些详细信息，以返回所有事件详细信息(名称、mname、net(。

数据：

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

为了使 ng-repeat 正常工作，您必须在另一个数组中提取国家/地区数据(以某种方式转换初始数据(。

如果这些country字段具有一致的命名(例如每个字段上的"country"中缀(，则可以将它们提取到自己的数组中，并使用ng-repeat对其进行迭代。

这是工作解决方案。它假设国家/地区数组的名称中都带有"国家/地区"一词：

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: {
         //...
    }
}

该解决方案采用您提供的数据并将其转换为如下所示的条目数组：{ yearMonth: yearMonth, countries: [] };

你只需要像这样渲染它们：

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

你可以在这里检查小提琴：http://jsfiddle.net/tvy4jbvs/

相关文章：