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?

Answer 1

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>