Raddy Raddy - 6 months ago 25
JSON Question

AngularJS ng-repeat object

I have a feeling that this should be very simple thing to do but I can't figure it out at the moment.

I am learning AngularJS by building a simple podcast app. So far I've managed to convert an XML file from url to JSON object.

Now I would like to loop thru each object of the "story" and display data such as title and image url. (see img below)

Object Loop - ForEach



starter.controller('fox', function($scope, $http){

$http.get('http://api.npr.org/query?id=57&apiKey=i've removed the key)
.success(function(data, status, headers, config){
var x2js = new X2JS();
var jsonOutput = x2js.xml_str2json(data);
console.log(jsonOutput);

$scope.title = jsonOutput.nprml.list.story[0]['title'];

})
.error(function(data, status, headers, config){
alert('There is a problem');
})

});

<div class="list" ng-repeat=" ? ">
{{title}}
</div>





The code below only renders the first object as I've set that manually - story[0]['title'] and I am unsure hot to loop thru the list.

In jQuery I would usually do for each loop and append the result in a div.

Answer

it should be something like this.

starter.controller('fox', function($scope, $http){

$http.get('http://api.npr.org/query?id=57&apiKey=i've removed the key)
  .success(function(data, status, headers, config){
    var x2js = new X2JS();
    var jsonOutput = x2js.xml_str2json(data);
    console.log(jsonOutput);

    $scope.stories = jsonOutput.nprml.list.story;

  })
  .error(function(data, status, headers, config){
    alert('There is a problem');
  })

});
<div class="list" ng-repeat="story in stories">
	{{story.title}}
    {{story.link}}
</div>

Comments