ngRepeat iterate with array objects in angularjs

Question

I'm trying to figure out on how to iterate the array using ngrepeat

If I have a array of data like below

{
  "People": [{
      "name": "Andrew Amernante",
      "rating": 3,
    },
    {
      "name": "Frank Wang",
      "rating": 5,
    },
    {
      "name": "Chang Wang",
      "rating": 5,
    }
  ]
}

In Controller, I have these code snippets.

app.controller('mainController', function($scope, $http) {
  $http.get('people.json').
  then(function onSuccess(response) {
    console.log(response);
    $scope.peoples = response.data;

  }).
  catch(function onError(response) {
    console.log(response);
  });
});

And, I wanted to iterate the array and display the three name in list.

<ul class="nav">
  <li ng-repeat="obj.peoples track by $index">
    <a href="#/">{{obj.name}}</a>
  </li>
</ul>

But, I cannot able to get the names, any idea on this?

FYI - I'm using Angular 1.6.5 version here.

Plunkr Code here

lealceldeiro · Accepted Answer · 2018-07-10 15:15:06Z

4

You need to fix your HTML code.

Instead of ng-repeat="obj.peoples track by $index" it should be ng-repeat="obj in peoples.People track by $index"

See below demo.

angular.module('app', [])
  .controller('mainController', function($scope, $http) {
    // mocked, equivalente to `$scope.peoples = response.data`
    $scope.peoples = {
      "People": [{
          "name": "Andrew Amernante",
          "rating": 3,
        },
        {
          "name": "Frank Wang",
          "rating": 5,
        },
        {
          "name": "Chang Wang",
          "rating": 5,
        }
      ]
    };
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app='app' ng-controller='mainController'>
  <ul class="nav">
    <li ng-repeat="obj in peoples.People track by $index">
      <a href="#/">{{obj.name}}</a>
    </li>
  </ul>

</div>

edited Jul 10, 2018 at 15:15

answered Jul 10, 2018 at 15:13

lealceldeiro

15.1k7 gold badges55 silver badges85 bronze badges

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

6 Comments

UI_Dev Over a year ago

any idea on how can I use single page application here? if we have different set of dynamic list

lealceldeiro Over a year ago

@UI_Dev you're already using a single page app here (using Angular), aren't you? What do you mean with "if we have different set of dynamic list"?

UI_Dev Over a year ago

plnkr.co/edit/iheQU9mYXZwyHVlI6MeP?p=preview here is my updated plunkr, i cannot able to switch between templates

lealceldeiro Over a year ago

@UI_Dev I think you're trying to use ng-view incorrectly. Maybe you want to read the ngView documentation in order to learn how to use it properly?

lealceldeiro Over a year ago

@UI_Dev this is a whole new issue you might want to ask in a separate question. This way more people here on SO can help you since this thread in my answer is only being seen by you and me.

|

Akhil Aravind · Accepted Answer · 2018-07-10 15:10:37Z

1

it is peoples in your script.js and you are using obj in html

$http.get('people.json').
        then(function onSuccess(response) {
            console.log(response);
            $scope.peoples = response.data;

        }).

change your html to the below code,

<li class="active" ng-repeat="item in peoples.People">
       <a href="#/">{{item.name}}<span class="glyphicon glyphicon-play"></span></a>
 </li>

answered Jul 10, 2018 at 15:10

Akhil Aravind

6,0451 gold badge18 silver badges37 bronze badges

4 Comments

Akhil Aravind Over a year ago

<li class="active" ng-repeat="item in peoples.People track by $index"> this will also work

Akhil Aravind Over a year ago

@UI_Dev , thanks for the reply, is this the correct answer ?.

UI_Dev Over a year ago

In this case, how can I use single page application here? if we have different set of dynamic list

Akhil Aravind Over a year ago

we can use this iteration if we have same key in all the dynamic list

Axar · Accepted Answer · 2018-07-10 15:09:26Z

-1

Two things, in javscript

 $scope.peoples = response.data.People;

and in ng-repeat it should be

ng-repeat="people in peoples track by $index"

answered Jul 10, 2018 at 15:09

Axar

5211 gold badge3 silver badges11 bronze badges

Collectives™ on Stack Overflow

ngRepeat iterate with array objects in angularjs

3 Answers 3

6 Comments

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related