Not able to display array in Object

Question

I have an app where a call to my API returns an object that also contains an array of objects.

Essentially:

   {
      "_id": "587bc430e64e9f28a6894dd4",
      "lastname": "Lane",
      "firstname": "Panny",
      "__v": 0,
      "contacts": [
         {
            "name": "rick jevers",
            "age": 25,
            "_id": "587bc430e64e9f28a6894dd5"
         }
      ]
   },

I thought the way to display the objects in the array was to use another ng-repeat, like so:

<div class="col-md-12" style="clear:both; padding:30px;">
      <ul style="list-style: none">
      <li ng-repeat="item in sample.post">
        <strong>
          {{item.firstname}} {{item.lastname}}
        </strong>  
        <ul style="list-style: none;">
          <li ng-repeat="contact in sample.post.contacts">
            {{contact.name}}
          </li>
        </ul>
      </li>
    </ul>
</div>

But this doesn't work for me.

What am I missing?

Supradeep · Accepted Answer · 2017-01-15 19:57:26Z

For the second ng-repeat, you are already inside another ng-repeat, which means you already have the current object (item) that is being repeated say the first object in the array for example, Hence, directly use it in the second ng-repeat like below :

<ul style="list-style: none;">
      <li ng-repeat="contact in item.contacts">
        {{contact.name}}
      </li>
    </ul>

Working Demo :

angular.module('app', [])
 .controller('myCtrl', function ($scope) {
 $scope.sample = {};
  $scope.sample.post = [{
      "_id": "587bc430e64e9f28a6894dd4",
      "lastname": "Lane",
      "firstname": "Panny",
      "__v": 0,
      "contacts": [
         {
            "name": "rick jevers",
            "age": 25,
            "_id": "587bc430e64e9f28a6894dd5"
         }
      ]
   }]
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="myCtrl">
  <div class="col-md-12" style="clear:both; padding:30px;">
      <ul style="list-style: none">
      <li ng-repeat="item in sample.post">
        <strong>
          {{item.firstname}} {{item.lastname}}
        </strong>  
        <ul style="list-style: none;">
          <li ng-repeat="contact in item.contacts">
            {{contact.name}}
          </li>
        </ul>
      </li>
    </ul>
</div>
</div>

Aniket Sinha · Accepted Answer · 2017-01-15 20:23:41Z

To solve this you need to figure out why it didn't work for you. ng-repeat iterates over an array and for each item in the array, it'll repeat the element along with it's child elements in the DOM.

When you write the 1st ng-repeat, you are iterating on the main array which contain all the person details. In the next step, you have contacts array within each such object, i.e here you want to iterate in the same object's contacts.

Take your input:

[
{
      "_id": "587bc430e64e9f28a6894dd4",//person 1
      "lastname": "Lane",
      "firstname": "Panny",
      "__v": 0,
      "contacts": [
         {
            "name": "rick jevers",
            "age": 25,
            "_id": "587bc430e64e9f28a6894dd5"
         }
      ]
   }, 
{
//person 2
}, {
//person 3
}

So your 1st ng-repeat would be over this array. Next comes contact, which is in the same object, so you need to do ng-repeat on contacts, but in the same object.

<div class="col-md-12" style="clear:both; padding:30px;">
  <ul style="list-style: none">
  <li ng-repeat="item in sample.post">
    <strong>
      {{item.firstname}} {{item.lastname}}
    </strong>  
    <ul style="list-style: none;">
      <li ng-repeat="contact in item.contacts"><!--iterate over item's contact-->
        {{contact.name}}
      </li>
    </ul>
  </li>
</ul>

Collectives™ on Stack Overflow

Not able to display array in Object

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related