ng-repeat not iterating through json object

Question

The controller which contains the JSON object, which is then passed to the view.

'use strict';

//app global variable
//this is the controller that handles post requests
//declare services as dependecies $http, $location, custom service apiServiceWeb
app.controller('menteeMentorsCtrl', function($scope, $http, $cookies, $rootScope, $location, loggedInStatus, setCredentials, apiServiceWeb) {


  //get cookie, and then make api call
  var cookieData = setCredentials.getCookie('globals');

  console.log(cookieData);
  console.log("email " + cookieData.auth.username);
  console.log("userType " + cookieData.auth.userType);
  console.log("token " + cookieData.auth.token);

  var ctr_scope = $scope;
  $scope.users = []; //declare an empty array

  $scope.alert = {};
  $scope.showAlert = false;
  $scope.users = [{
    "activeMentors": [{
      "profession": "test",
      "lastName": "test",
      "jobTitle": "test",
      "chatIdentifier": "e46eacf0f7dbd998aba9957b127b51935cbd4fed68533d5708e22c632b60eaa4d65c81fc3cfe3192112c02db1ab4090bc0f18f8a8fdb8cd60f4368643a9a5dbd",
      "title": "",
      "pushToken": "tets",
      "token": {
        "secureToken": "c243fac3ee241f9cb7c442ec893a9c58d85312b890af8719949057e61c3d6a7670455e178a692f27ae0e07da89b4b5d6b0d4267df799249969c70a829cbbab9d"
      },
      "mentees": [],
      "firstName": "test",
      "profileColour": "test",
      "emailAddress": "test",
      "termsAgreed": test,
      "ambition": {
        "ambition": "test",
        "isPrivate": "test"
      },
      "dob": "21/04/1991",
      "busy": test,
      "describingWords": [
        "tese",
        "test",
        "",
        "",
        ""
      ],
      "userType": "mentor",
      "id": {
        "machineIdentifier": 12374093,
        "processIdentifier": 7963,
        "counter": 705715,
        "timestamp": 1439803213
      },
      "requestedMentees": [],
      "profileImageUrl": "test"
    }],
    "requestedMentors": [{
      "profession": "test",
      "lastName": "test",
      "jobTitle": "test",
      "title": "test",
      "mentees": [],
      "firstName": "test",
      "emailAddress": "test",
      "termsAgreed": false,
      "ambition": {
        "ambition": "",
        "isPrivate": "TRUE"
      },
      "dob": "20/06/80",
      "busy": false,
      "describingWords": [
        "Compassionate",
        "Independent",
        "Passionate",
        "Inquisitive",
        "Creative"
      ],
      "userType": "tets",
      "id": {
        "machineIdentifier": 12374093,
        "processIdentifier": 7963,
        "counter": 705580,
        "timestamp": 1439775250
      },
      "requestedMentees": [],
      "profileImageUrl": "test"
    }]
  }];

});

View:

This is where I use ng-repeat.

 <div role="main" class="container theme-showcase">
      <div class="" style="margin-top:90px;">
        <div class="col-lg-8">
            <div class="page-header">
                <h2 id="tables">list items</h2>
            </div>
            <div class="bs-component" ng-controller="menteeMentorsCtrl">
                <div class="alert alert-info" ng-hide=true>
                    <p>Sort key: {{sortKey}}</p>
                    <p>Reverse: {{reverse}}</p>
                    <p>Search String : {{search}}</p>
                </div>
                <form class="form-inline">
                    <div class="form-group">
                        <label >Search</label>
                        <input type="text" ng-model="search" class="form-control" placeholder="Search">
                    </div>
                </form>

<div ng-repeat="test in users.requestedMentors">
 <span>Name : {{ test.firstName }}</span>
 <span>Age : {{ test.lastName }}</span>
</div>


        </div>
      </div>
    </div>

There are two parent objects in the json object, when I do test in users.requestedMentors , nothing is returned, why is this happening, thanks.

It would be useful if you created a snippet with your code that people can run using the stack overflow code snippets feature or alternatively jsfiddle.net — Amicable
– Amicable, Commented Aug 20, 2015 at 12:09

sahil gupta · Accepted Answer · 2015-08-20 12:19:09Z

3

You should use

<div ng-repeat="test in users[0]['requestedMentors']">
 <span>Name : {{ test.firstName }}</span>
 <span>Age : {{ test.lastName }}</span>
</div>

Explaination

This is because users is itself an array of objects and you are trying to acccess the first element of it.

Update

If there are multiple objects in the users array you should use ng-repeat

Eg:

<div ng-repeat="user in users">
  <div ng-repeat="test in user['requestedMentors']">
     <span>Name : {{ test.firstName }}</span>
     <span>Age : {{ test.lastName }}</span>
  </div>
</div>

edited Aug 20, 2015 at 12:19

answered Aug 20, 2015 at 12:12

sahil gupta

2,34914 silver badges14 bronze badges

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

3 Comments

ThibaudL Over a year ago

or users[0].requestedMentors because your users is an array containing only 1 object

user3754111 Over a year ago

Thanks, sorry quite new to angular so getting used to the syntax.

sahil gupta Over a year ago

@user3754111 : Welcome!!

404 · Accepted Answer · 2015-08-20 12:40:32Z

0

In your case, users is an array object. Before accessing the each object inside the user array, you need to loop over the users object first. you should have something like this.

<div ng-repeat="user in users">
<div ng-repeat="test in user.requestedMentors">
  <span>Name : {{ test.firstName }}</span>
  <span>Age : {{ test.lastName }}</span>
</div>

edited Aug 20, 2015 at 12:40

answered Aug 20, 2015 at 12:14

404

1031 silver badge7 bronze badges

Collectives™ on Stack Overflow

ng-repeat not iterating through json object

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related