CODEWITHSUNDEEP
javascriptjqueryarraysjsonangularjs
LadyT
LadyT

Reputation: 659

How to load Nested Arrays in Angular?

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

});

Upvotes: 2

Views: 444

Answers (5)

Sanjay Bhardwaj
Sanjay Bhardwaj

Reputation: 412

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>

Upvotes: 1

Gulfaraz Rahman
Gulfaraz Rahman

Reputation: 407

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

Upvotes: 1

Man Programmer
Man Programmer

Reputation: 5356

update only this line

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

http://jsfiddle.net/L01rjepb/

Upvotes: 1

user405398
user405398

Reputation:

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

Upvotes: 1

Anik Islam Abhi
Anik Islam Abhi

Reputation: 25352

that's becuse citis is in r not in data

try like this 

ng-repeat="city in r.cities"

CODEPEN

Upvotes: 1

Related Questions