get nested JSON object in angular js

Question

I'm having a AngularJS spa and want to fetch files from a JSON, which works good so far.

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

app.controller("TodoCtrl", function($scope, $http) {
  $http.get('todos.json').
    success(function(data, status, headers, config) {
      $scope.posts = data;
    }).
  error(function(data, status, headers, config) {
    alert("Error");
  });
});

and bind it to repeat a list.

<ul ng-repeat="post in posts">
  <li>
    <b>Name : </b> {{post.name}} <br>
    <b>Adress/street :</b> {{post.address.street}}
  </li>
</ul>

my problem ist, what if I have nested another object inside the JSON:

"adress": [
  {
    "street": "somewhat street",
    "town": "somewhat town"
  }]

My attempt post.adress.street does not work. Any suggestions?

You need to use another ng-repeat for Address object. Refer here for more info. — Kailash
– Kailash, Commented Sep 30, 2014 at 10:42

bmleite · Accepted Answer · 2014-09-30 10:46:29Z

2

Since address is an array, you have 2 options.

First option:

Use the array notation to access only one of the items in the array. For example:

<ul ng-repeat="post in posts">
  <li>
    <b>Name : </b> {{post.name}} <br>
    <b>Adress/street :</b> {{post.address[0].street}}
  </li>
</ul>

Second option:

Iterate over all the address items using another ng-repeat:

<ul ng-repeat="post in posts">
  <li>
    <b>Name : </b> {{post.name}} <br>
    <div ng-repeat="address in post.address">
      <b>Adress/street :</b> {{address.street}}
    </div>
  </li>
</ul>

answered Sep 30, 2014 at 10:46

bmleite

26.9k4 gold badges74 silver badges46 bronze badges

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

Collectives™ on Stack Overflow

get nested JSON object in angular js

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related