CODEWITHSUNDEEP
angularjsnestedangularjs-ng-repeat
bofanda
bofanda

Reputation: 11806

AngularJs - Nested ng-repeat

I'm trying to iterate over a given JSONObject, which contains JSONArray in it and display it in html. So, here is the example:

jsonData:

{
    "category1": [
        {
            "name": "Some title",
            "desc": "And its description"
        },
        {
            "name": "Another title here",
            "desc": "Also description here"
        }
    ],
    "category2": [
        {
            "name": "Dummy name",
            "desc": "Lorem ipsum etc."
        }
    ],
    "category3": [
        {
            "name": "Blah",  
            "desc": "Blah blah"
        }
    ]
}

Html:

<div ng-repeat="category in vm.jsonData track by $index">
    <h3>{{ category }}</h3>
    <ul>
        <li ng-repeat="item in category">
            <span><b>{{ item.name }}</b></span><br/>
            <span>{{ item.desc }}</span>
        </li>
    </ul>
</div>

So far I can get name and desc properly but I miss category in html. Any help would be appreciated.

Upvotes: 0

Views: 40

Answers (2)

Sajeetharan
Sajeetharan

Reputation: 222522

You need ng-repeat as <div ng-repeat="(key, value) in vm.jsonData track by $index">

DEMO 

var app = angular.module('testApp',[]);
app.controller('testCtrl',function(){
  this.jsonData = {
    "category1": [
        {
            "name": "Some title",
            "desc": "And its description"
        },
        {
            "name": "Another title here",
            "desc": "Also description here"
        }
    ],
    "category2": [
        {
            "name": "Dummy name",
            "desc": "Lorem ipsum etc."
        }
    ],
    "category3": [
        {
            "name": "Blah",  
            "desc": "Blah blah"
        }
    ]
};

 vm = this;

});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="testApp" ng-controller="testCtrl as vm">
<div ng-repeat="(key, value) in vm.jsonData track by $index">       
    <ul>    
     {{key}} 
        <li ng-repeat="item in value">
            <span>{{ item.name }}</span>
            <span>{{ item.desc }}</span>
        </li>
    </ul>
</div>
</body>

Upvotes: 2

Himesh Suthar
Himesh Suthar

Reputation: 562

You need to access key of the element which is "category1" in your case.

you can do this by using this syntax

ng-repeat="(key, value) in data"

here working jsfiffle for your example

Upvotes: 1

Related Questions