Question

我陷入了逻辑终点，我从请求中获取了json，如下所示：

"externalLinks": [
        {
            "extPageId": 10,
            "groupName": "BLAVATNIK ARCHIVE FOUNDATION",
            "title": "MISSION & HISTORY",
            "url": "http://www.mission-history/",
            "sortOrder": 1
        },
        {
            "extPageId": 9,
            "groupName": "BLAVATNIK ARCHIVE FOUNDATION",
            "title": "LEADERSHIP & STAFF",
            "url": "http://www.leadership-staff/",
            "sortOrder": 4
        },
        {
            "extPageId": 3,
            "groupName": "PROGRAMS",
            "title": "2016 PHOTOS",
            "url": "http://www.2016-photos/",
            "sortOrder": 1
        },
        {
            "extPageId": 2,
            "groupName": "PROGRAMS",
            "title": "2015 PHOTOS",
            "url": "http://www.2015-galleries/",
            "sortOrder": 2
        },
    ],

我需要显示结果的html是这样的：

            <div class="overview-box">
                <h4>BLAVATNIK ARCHIVE FOUNDATION</h4>
                <p><a target="_blank" href="http://www.mission-history/"> MISSION &amp; HISTORY<span class="stripe pdf-stripe">&nbsp;</span></a>s</p>
                <p><a target="_blank" href="http://www.collection-overview/"> COLLECTIONS OVERVIEW<span class="stripe pdf-stripe">&nbsp;</span></a></p>
                <h4>PROGRAMS</h4>
                <p><a target="_blank" href="http://www.2016-photos/"> 2016 PHOTOS<span class="stripe pdf-stripe">&nbsp;</span></a></p>
                <p><a target="_blank" href="http://www.2015-galleries/"> 2015 PHOTOS<span class="stripe pdf-stripe">&nbsp;</span></a></p>
            </div>

所以你可以在html中看到，在顶部和底部都有组名，它的内容如title，url等。那么如何迭代这个json结果来显示html中的内容。我试图创建数组和其他一些我从谷歌获得的代码，但没有找到它的正确逻辑。我可以做到这一点是PHP，但在Angular中我很新：

$http.get(BASE_URL + "aboutdata")
        .then(function (response) {
            $scope.pageTitle = response.data.pageTitle;
            var externalLinks = [];
            $scope.groupName = [];
            angular.forEach(response.data.externalLinks, function (value, key) {
                this.push(key + ': ' + value);
            }, externalLinks);
            console.log(externalLinks);
        }).finally(function () {
    // called no matter success or failure
    $scope.loading = false;
});

Answer 1

您要找的是groupBy过滤器。如果您使用它，您可以根据ng-repeat

中的属性进行分组

<li ng-repeat="(key, value) in data | groupBy: 'groupName'">
 <b>Group name: {{ key }}</b>
    <ul>
      <li ng-repeat="item in value">
                <p><a target="_blank" href="{{item.url}}"> {{item.title}}</a></p>
      </li>
    </ul>
 </li>

工作JSFiddle供您参考。

注意：groupBy过滤器不是angular.js的一部分您必须包含angular.filter模块。

Answer 2

您可以轻松地从数组中创建字典，这意味着每个条目都包含属于每个唯一组的项目数组：

var groupBy = function(array, key) {
  var r = {};
  array.forEach(function(item) {
    if (r[item[key]]) {
      r[item[key]].push(item)
    } else {
      r[item[key]] = [item]
    }
  })
  return r
}

$scope.grouped_externalLinks = groupBy(externalLinks, 'groupName');

现在，您在表单

上有一个类似对象文字的数组

{ 
 'BLAVATNIK ARCHIVE FOUNDATION': [ ... ],
 'PROGRAMS': [ ... ]
}

ng-repeat像往常一样，您甚至可以照顾每个群组中的sortOrder：

<div ng-repeat="(groupName, items) in grouped_externalLinks">
  <strong> {{ groupName }} </strong>
  <div ng-repeat="item in items | orderBy:'sortOrder'">
    <p><a target="_blank" href="{{ item.url }}"> {{ item.title }} </a></p>
  </div>
</div>

angularjs 1.6.4 itrate over multi dimensional JSON and loop result in html

2 个答案: