使用角度js将具有相同ID的重复对象从json数据合并为单个对象

Posted 2023-05-09

【中文标题】使用角度js将具有相同ID的重复对象从json数据合并为单个对象

【英文标题】：Merging duplicate objects with same id into single object from json data using angular js

【发布时间】：2017-04-01 05:30:40

【问题描述】：

我从 api 调用中获取了一个 json 数据，用于包含 id、name、error_type 和 message 的各种项目的错误列表。我需要显示一个带有项目名称和 ID 的标题，并在该标题下显示属于该 ID 的所有错误的列表。我在角度使用独特的过滤器，但这会跳过具有相同 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>

【参考方案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