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

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>

any idea on how can I use single page application here? if we have different set of dynamic list
@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"?
plnkr.co/edit/iheQU9mYXZwyHVlI6MeP?p=preview here is my updated plunkr, i cannot able to switch between templates
@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?
@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

Two things, in javscript

 $scope.peoples = response.data.People;

and in ng-repeat it should be

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

Collectives™ on Stack Overflow

ngRepeat iterate with array objects in angularjs

3 Answers 3

6 Comments

4 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

4 Comments

Comments

Linked

Related