AngularJs - Nested ng-repeat

Question

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.

Ramesh Rajendran · Accepted Answer · 2018-09-19 16:46:23Z

2

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>

edited Sep 19, 2018 at 16:46

Ramesh Rajendran

38.9k49 gold badges159 silver badges241 bronze badges

answered Sep 19, 2018 at 16:35

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Ramesh Rajendran Over a year ago

What is the use of <h3>{{ category }}</h3>?? I have just removed in Edit

Sajeetharan Over a year ago

@RameshRajendran Thanks :) this is why Code reviews are important :P

bofanda Over a year ago

@Sajeetharan thanks, the way with (key, value) in vm.jsonData helped to solve the problem.

Himesh Suthar · Accepted Answer · 2018-09-19 16:42:17Z

1

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

edited Sep 19, 2018 at 16:42

answered Sep 19, 2018 at 16:24

Himesh Suthar

5724 silver badges14 bronze badges

2 Comments

bofanda Over a year ago

Thanks. The way with (key, value) in vm.jsonData helped to solve the problem

Himesh Suthar Over a year ago

@Dozent Welcome

Collectives™ on Stack Overflow

AngularJs - Nested ng-repeat

2 Answers 2

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related