javascript - 使用 Angular js 将具有相同 id 的重复对象从 json 数据合并到单个对象中

Question

我从 api 调用获取 json 数据，获取包含 id、名称、error_type 和消息的各种项目的错误列表。我需要显示一个标题，其中包含项目的名称和 id，并在标题下显示属于该 id 的所有错误的列表。我在 Angular 中使用独特的过滤器，但这会跳过具有相同 id 的下一个对象。我需要一些帮助来在 id 相同时合并对象属性。

var items =[ {    
    "id": 83739,
    "name": "abcd",
    "type": "error",
    "msg": "For Macros, x >= y"
},
{
    "id": 83739,
    "name": "abcd",
    "type": "warning",
    "msg": "Missing Power Condition"
},{
    "id": 83740,
    "name": "efgh",
    "type": "error",
    "msg": "Missing Power supply"
}]

<div ng-repeat="item in items | unique:'id'">
 <h4><a href="#/product/item/{{item.id}}">  {{io.item}}</a></h4>
 <ul>
   <li > {{item.type}}: {{item.msg}}</li>
 </ul>
</div>

我需要的输出是这样的

<div>
  <h4><a href="#/product/item/83739"> abcd</a></h4>
  <ul>
    <li > error: For Macros, x >= y</li>
    <li > warning: Missing Power Condition</li>
   
  </ul>
</div>

<div>
  <h4><a href="#/product/item/83740}"> efgh</a></h4>
  <ul>
     <li > error: Missing Power supply</li>
  </ul>
</div>

Answer 1

向您的 li 添加 ng-repeat 指令并应用过滤器，如下所示:

<li ng-repeat="i in items | filter: {id: item.id}"> {{i.type}}: {{i.msg}}</li>

在上下文中:

<div ng-repeat="item in items | unique:'id'">
   <h4>
      <a href="#/product/item/{{item.id}}">  {{io.item}}</a>
   </h4>
   <ul>
      <li ng-repeat="i in items | filter: {id: item.id}"> {{i.type}}: {{i.msg}}</li>
   </ul>
</div>

这是一个工作 plunk