angularjs 1.6.4在多维JSON上使用itrate，循环结果为html

我被困在逻辑端，从请求中获取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>

---

您要查找的是

groupBy

filter。如果使用该选项，则可以根据

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>

组名：{{key}

为你的推荐人工作

---

注意：groupBy筛选器不是angular.js的一部分，您必须包含模块。

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

var groupBy=函数（数组，键）{
var r={}；
array.forEach（函数（项）{
if（r[项目[键]）{
r[项目[键]]。推送（项目）
}否则{
r[项目[关键]]=[项目]
}
})
返回r
}
$scope.grouped_externalLinks=groupBy（externalLinks，'groupName'）；

现在表单上有了类似数组的对象文字

{
“布拉瓦尼克档案基金会”：[…]，
“程序”：[…]
}

ng repeat

像往常一样，您甚至可以在每组中处理

sortOrder

：

{{groupName}}

最佳解决方案，先生。谢谢

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