CODEWITHSUNDEEP
javascriptjsonangularjs
Greg
Greg

Reputation: 1402

ng-repeat gives me only one result

I'm using AngularJs to read the iTunes API. I want to get all the results in <entry> but so far I only get the first result:

<div class="container" ng-controller="appController">
<div class="item" ng-repeat="chart in charts">
    <h2>{{chart.entry[$index]['im:name'].label}}</h2>
</div>

The result is im:name from entry[0]; when I replace $index with a number then I get the result as well, so clearly everything is loaded just fine.

Controller:

app.controller('appController', ['$scope', 'charts', function($scope, charts) {
  charts.success(function(data) {
    $scope.charts = data;
  });

}]);

Loading JSON file:

app.factory('charts', ['$http', function($http) {
  return $http.get('https://itunes.apple.com/us/rss/topsongs/limit=100/json')
         .success(function(data) {
           return data;
         })
         .error(function(data) {
           return data;
         });
}]);

Json structure

Upvotes: 0

Views: 126

Answers (3)

James Brierley
James Brierley

Reputation: 4670

I think you want to repeat over charts.feed.entry instead.

<div class="item" ng-repeat="entry in charts.feed.entry">
    <h2>{{entry['im:name'].label}}</h2>
</div>

Edit: An explanation as to why this is charts.feed.entry and not charts.entry. From the question:

<div class="item" ng-repeat="chart in charts">

This looped through charts, which because it was an object and not an array, meant looping through its properties. There was only one, so there was one iteration, which assigned the single property, feed, to chart. Therefore:

chart.entry[$index]['im:name'].label

was equivalent to:

charts.feed.entry[$index]['im:name'].label

Upvotes: 2

Arkantos
Arkantos

Reputation: 6608

Based on your JSON structure, you're trying to loop over charts but it's not an array, it's just an object with an array called entry that has all the entries. So you should change your 

<div class="item" ng-repeat="chart in charts">
    <h2>{{chart.entry[$index]['im:name'].label}}</h2>
</div>

to

<div class="item" ng-repeat="entry in charts.feed.entry">
    <h2>{{entry ['im:name'].label}}</h2>
</div>

Upvotes: 2

potatopeelings
potatopeelings

Reputation: 41075

Try changing it to 

<div class="container" ng-controller="appController">
<div class="item" ng-repeat="chart in charts">
    <div class="item" ng-repeat="entry in chart.entry">
        <h2>{{entry['im:name'].label}}</h2>
    </div>
</div>

Upvotes: 1

Related Questions