up vote 0 down vote favorite

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?

share|improve this question
    
You need to use another ng-repeat for Address object. Refer here for more info. – Kailash Sep 30 '14 at 10:42
up vote 1 down vote accepted

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>
share|improve this answer
    
thank you for that, works fine! – supersize Sep 30 '14 at 10:49

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.