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-10T15:15:06.680

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 '18 at 15:15

answered Jul 10 '18 at 15:13

lealceldeiro

14,342
6
49
80

any idea on how can I use single page application here? if we have different set of dynamic list – UI_Dev Jul 10 '18 at 15:24
@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_"? – lealceldeiro Jul 10 '18 at 15:28
http://plnkr.co/edit/iheQU9mYXZwyHVlI6MeP?p=preview here is my updated plunkr, i cannot able to switch between templates – UI_Dev Jul 10 '18 at 15:36
@UI_Dev I think you're trying to use `ng-view` incorrectly. Maybe you want to read the [`ngView` documentation](https://docs.angularjs.org/api/ngRoute/directive/ngView) in order to learn how to use it properly? – lealceldeiro Jul 10 '18 at 15:51
1

@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. – lealceldeiro Jul 10 '18 at 15:53
https://stackoverflow.com/questions/51270206/cannot-route-to-other-pages-in-spa-angular-with-dynamic-list – UI_Dev Jul 10 '18 at 16:29

score 1 · Answer 2 · answered Jul 10 '18 at 15:10

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 '18 at 15:10

Akhil Aravind

5,741
16
35

this will also work – Akhil Aravind Jul 10 '18 at 15:13
@UI_Dev , thanks for the reply, is this the correct answer ?. – Akhil Aravind Jul 10 '18 at 15:14
In this case, how can I use single page application here? if we have different set of dynamic list – UI_Dev Jul 10 '18 at 15:24
we can use this iteration if we have same key in all the dynamic list – Akhil Aravind Jul 11 '18 at 04:03

score -1 · Answer 3 · answered Jul 10 '18 at 15:09

-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 '18 at 15:09

Axar

521
1
3
11

ngRepeat iterate with array objects in angularjs

3 Answers3