How to load Nested Arrays in Angular?

Question

I have a codepen of some code I am playing with. I want to load the json data through a service and then use ng-repeat to load the arrays.

The problem is that it loads the first array just fine. However, the nested array "data.cities" doesn't show up. In the console, it states that its too much recursion. Here is the link and code below.

Codepen Link

html

<div ng-app="myApp" ng-controller="nameController">
<div class="container">
    <div class="row">
        <div class="col-md-12">

            <div ng-repeat="r in data">
                <div>{{ r.region }} - x: {{ r.x}}, y: {{r.y}} ---- {{ r.desc}}</div>
                <div ng-repeat="city in data.cities">{{city.name}}</div>
                <div>
                </div>
            </div>

        </div>
    </div>
</div>

JS

var app = angular.module("myApp", []);

app.controller("nameController", function($scope, mapService) {
$scope.data = mapService.mapData();
});

app.service("mapService", function() {

var mapInfo = [{
    region: "America",
    desc: "Some info about America",
    x: 50,
    y: 200,
    cities: [{
        name: "Chicago",
        x: 20,
        y: 232
    }, {
        name: "Los Angeles",
        x: 52,
        y: 124
    }]
}, {
    region: "Europe",
    desc: "Some info about Europe",
    x: 10,
    y: 24,
    cities: [{
        name: "Chicago2",
        x: 20,
        y: 232
    }, {
        name: "Los Angeles2",
        x: 52,
        y: 124
    }]
}, {
    region: "China",
    desc: "Some info about China",
    x: 88,
    y: 126,
    cities: [{
        name: "Chicago3",
        x: 20,
        y: 232
    }, {
        name: "Los Angeles3",
        x: 52,
        y: 124
    }]
}];

this.mapData = function() {
    /*angular.forEach(pics, function(value, key) {
     //console.log("key", value.name);
      return value.name;
    });*/
    return mapInfo;
};

});

It might help you. stackoverflow.com/questions/27606595/…

Anil Singh
– Anil Singh

2015-10-07 05:38:26 +00:00
Commented Oct 7, 2015 at 5:38 — Anil Singh
– Anil Singh, Commented Oct 7, 2015 at 5:38

Man Programmer · Accepted Answer · 2015-10-07 05:40:14Z

1

update only this line

<div ng-repeat="city in r.cities">{{city.name}}</div>

http://jsfiddle.net/L01rjepb/

answered Oct 7, 2015 at 5:40

Man Programmer

5,3662 gold badges24 silver badges21 bronze badges

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

Comments

Anik Islam Abhi · Accepted Answer · 2015-10-07 05:39:58Z

1

that's becuse citis is in r not in data

try like this

ng-repeat="city in r.cities"

CODEPEN

answered Oct 7, 2015 at 5:39

Anik Islam Abhi

25.4k8 gold badges61 silver badges82 bronze badges

Comments

user405398 · Accepted Answer · 2015-10-07 05:40:02Z

1

<div ng-repeat="city in r.cities">{{city.name}}</div> is what you need.

<div ng-app="myApp" ng-controller="nameController">
<div class="container">
    <div class="row">
        <div class="col-md-12">

            <div ng-repeat="r in data">
                <div>{{ r.region }} - x: {{ r.x}}, y: {{r.y}} ---- {{ r.desc}}</div>
                <div ng-repeat="city in r.cities">{{city.name}}</div>
                <div>
                </div>
            </div>

        </div>
    </div>
</div>

answered Oct 7, 2015 at 5:40

user405398

Comments

Gulfaraz Rahman · Accepted Answer · 2015-10-07 05:41:16Z

1

Change data.cities (original object)

<div ng-repeat="city in data.cities">{{city.name}}</div>

to r.cities (iterator item)

<div ng-repeat="city in r.cities">{{city.name}}</div>

http://codepen.io/anon/pen/dYWgXd

answered Oct 7, 2015 at 5:41

Gulfaraz Rahman

4074 silver badges13 bronze badges

Comments

Sanjay Bhardwaj · Accepted Answer · 2015-10-07 05:41:38Z

1

below sample might help you,

<table>
  <tbody ng-repeat="row in rows">
    <tr>
      <th>{{row.name}}</th>
    </tr>
    <tr ng-repeat="sub in row.subrows">
      <td>{{sub.name}}</td>
    </tr>
  </tbody>
</table>

answered Oct 7, 2015 at 5:41

Sanjay Bhardwaj

4122 silver badges10 bronze badges

Collectives™ on Stack Overflow

How to load Nested Arrays in Angular?

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related