priyanka.sarkar priyanka.sarkar - 1 month ago 13
Javascript Question

Remove duplicate names while displaying output in angularjs

I have a json (in my controller) as under

//creating an application module
var myAppModule = angular.module("myApp", []);


myAppModule.controller("MyCtrl", function($scope, $http){

var jsonData = [
{
"bucket": ">120",
"productCode": "SBML",
"countOfAllocatedAccount": 640
},
{
"bucket": ">120",
"productCode": "SBHL",
"countOfAllocatedAccount": 1391
},
{
"bucket": "1-30",
"productCode": "SBHL",
"countOfAllocatedAccount": 1081
},
{
"bucket": "1-30",
"productCode": "SBML",
"countOfAllocatedAccount": 408
},
{
"bucket": "1-30",
"productCode": "SBML",
"countOfAllocatedAccount": 998
},

{
"bucket": "X",
"productCode": "SBML+",
"countOfAllocatedAccount": 93
}
];
$scope.products = jsonData;

});//end controller


and my view(index.html) as under

<body ng-app="myApp">
<div ng-controller="MyCtrl" align="center">
<table border="1">
<tr>

<th>Bucket</th>
<th>PRODUCT_CODE</th>
<th>Allocated #</th>
</tr>
<tr ng-repeat="p in products">

<td><span>{{p.bucket}}</span></td>
<td><span>{{p.productCode}}</span></td>
<td><span>{{p.countOfAllocatedAccount}}</span></td>
</tr>
</table>
</div>
</body>
</html>


The current output is

enter image description here

But I am looking for the below output

enter image description here

Please help.

Answer

You can do something like this.

Compare the current bucket value with the previous one and if they are the same then don't show it.

<tr ng-repeat="p in products">
    <td><span ng-show="products[$index-1].bucket != p.bucket">{{p.bucket}}</span></td>                                     
    <td><span>{{p.productCode}}</span></td>
    <td><span>{{p.countOfAllocatedAccount}}</span></td>                     
</tr> 

You can see the results here JSBIN