javascript - Merging duplicate objects with same id into single object from json data using angular js -

i json data api call errors list of various items id, name, error_type , message. need display header name , id of item , under list of errors belonging id. using unique filter in angular skipping next object same id. want merge object property when id same.

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>

my output need this

<div>    <h4><a href="#/product/item/83739"> abcd</a></h4>    <ul>      <li > error: 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>

add ng-repeat directive li , apply filter, this:

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

in context:

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

here's working plunk