CODEWITHSUNDEEP
javascriptangularjsfilter
iPhoneDev
iPhoneDev

Reputation: 3015

How to use ng-repeat for typical JSON?

I have JSON like 

 [{
  Entry: [{
    ID:123,
    Name: 'XYZ',
    Addredd: '600, PA'
  }, 
  {
    ID:123,
    Name: 'ABC',
    Addredd: '700, PA'
  },
{
    ID:321,
    Name: 'RRR',
    Addredd: '800, PA'
  },
{
    ID:321,
    Name: 'FFF',
    Addredd: '900, PA'
  }]
}]

And I want to show data in HTML table as:

(Heading1)----------123----------

Row1- Name: XYZ Addredd: 600, PA

Row2- Name: ABC Addredd: 700, PA

(Heading2)----------321----------

Row1- Name: FFF Addredd: 800, PA

Row2- Name: RRR Addredd: 900, PA

I have tried to use custom filters however unable to use ng-repeat. Is there any way in Angular JS do this. Thanks

Upvotes: 0

Views: 73

Answers (3)

Beroza Paul
Beroza Paul

Reputation: 2117

I tried to parse the JSON data using angular and made the output you want. First of all I tried to make the JSON data in a organized format so that its easier to loop through in the DOM. There must have other better approaches. But I think this might help you. Following is my version of it:

The angular part: 

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 part

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

Output

(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

Upvotes: 1

sona
sona

Reputation: 123

Consider the JSON File

  {
         "123": [
                  {
                    "Name": "ABC",
                    "Addredd": "600,PA"
                  },
                  {
                     "Name": "XYZ",
                     "Addredd": "600,PA"
                  }
                ],
        "321": [
                 {
                  "Name": "DEF",
                   "Addredd": "600,PA"
                  }
               ]

}

Use ng-repeat for header and inner loop.

Upvotes: 0

Icycool
Icycool

Reputation: 7179

I second Claies in the comment of your post - you need to restructure your data to suit your view. In this case you need data structure like this:

[{
  ID:123,
  Entry: [{
    Name: 'XYZ',
    Addredd: '600, PA'
  }, 
  {
    Name: 'ABC',
    Addredd: '700, PA'
  }]
},
{
  ID:321,
  Entry: [{
    Name: 'FFF',
    Addredd: '800, PA'
  }, 
  {
    Name: 'RRR',
    Addredd: '900, PA'
  }]
}]

Then you can use double ng-repeat to get what you need.

Upvotes: 0

Related Questions