Utilizing Angular, I successfully parsed the JSON data to generate the desired output. Initially, I focused on organizing the JSON data in a structured format for easier traversal within the DOM. While there may be alternative methods, I believe this approach will prove beneficial. Below is my implementation:
The angular component:
angular.module("main", []).controller("MyCtrl", function($scope) {
var dataSrc = [
{
ID:123,
Name: 'XYZ',
Addredd: '600, PA'
},
{
ID:123,
Name: 'ABC',
Addredd: '700, PA'
},
{
ID:321,
Name: 'FFF',
Addredd: '800, PA'
},
{
ID:321,
Name: 'RRR',
Addredd: '900, PA'
},
{
ID:322,
Name: 'RRR',
Addredd: '900, PA'
}
];
var newDataSrc = new Array();
var tempDataSrc = new Array();
var idList = new Array();
for(i in dataSrc){
var item = dataSrc[i];
if(idList.indexOf(item.ID) !== -1){
tempDataSrc[item.ID].push({'Name' : item.Name, 'Addredd': item.Addredd});
}
else{
idList.push(item.ID);
tempDataSrc.push(item.ID);
tempDataSrc[item.ID] = new Array();
tempDataSrc[item.ID].push({'Name' : item.Name, 'Addredd': item.Addredd});
}
}
for(k in idList){
var eachId = idList[k];
var dataItem= [{'id' : eachId, 'data' : tempDataSrc[eachId]}];
newDataSrc.push(dataItem);
}
$scope.items = newDataSrc;
});
The DOM section
<div ng-app="main">
<div ng-controller="MyCtrl">
<table>
<tbody>
<tr ng:repeat="item in items track by $index" ng-if="item != null">
<td>
(Heading) --------------{{item[0].id}}------------
<div ng:repeat="info in item[0].data track by $index">
Row{{$index + 1}} - Name: {{info.Name}} Addredd: {{info.Addredd}}
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
Result
(Heading) --------------123------------
Row1 - Name: XYZ Addredd: 600, PA
Row2 - Name: ABC Addredd: 700, PA
(Heading) --------------321------------
Row1 - Name: FFF Addredd: 800, PA
Row2 - Name: RRR Addredd: 900, PA
(Heading) --------------322------------
Row1 - Name: RRR Addredd: 900, PA