Iterate JSON response from API using AngularJS ngResponse

Question

I'm taking my first steps with AngularJS calling an API that would send back a JSON object with the data that I need. I calls the API and takes the response and print it on the HTML, iterating as needed.

But I haven't found a way on the actual Javascript file, to iterate to lets say, group and sum items, or to print the actual values of the JSON to the console.

app.js

    angular.module('dashboard', ['ngResource']);
    function DashboardCtrl($scope, $resource) {
        $scope.dailyReports = $resource('http://myurl.com/app_dev.php/:action',
            {action:'dailyreports', appid:'@appid', begindate:'@begindate', enddate:'@enddate'});


    $scope.loadData = function() {
            $scope.dailyreportsResults = $scope.dailyReports.get({appid:$('#sel-apps').val(), begindate:$('#fecha-inicial').val(), enddate:$('#fecha-final').val()});
//it works!!!!
        };

$scope.iterate = function() {

            for (i=0; i < $scope.dailyreportsResults.data.length; i++){
                    $scope.periodUnits += $scope.dailyreportsResults.data[i].units;
                    console.log($scope.periodUnits);
                    //It doesnt work :(

            }
    };

index.html

ng-repeat="data in dailyreportsResults.data"
   {{data.countryName}}
   {{data.units}}

What am I doing wrong?

Thanks guys!

Just WHEN are you calling $scope.iterate? The ng-repeat directive will work after the JSON's been loaded, but calling iterate before the data is received will result in an error, or nothing at all! Try using the $resource callbacks - $scope.dailyReports.get({YOURDATA}, function(){callback -call iterate()}) — Tiago Roldão
– Tiago Roldão, Commented Feb 27, 2013 at 20:37
I agree, I don't see where you call the iterate function from. Can you create a JSFiddle for us with this error in it? — James M
– James M, Commented Feb 27, 2013 at 20:47

Coder1 · Accepted Answer · 2013-02-27 22:20:28Z

1

I'm not sure what your data looks like, but maybe you should be using 'for in' instead of incrementing an array.

$scope.iterate = function() {
  for (x in $scope.dailyreportsResults.data){
    $scope.periodUnits += $scope.dailyreportsResults.data[x].units;
    console.log($scope.periodUnits);
  }
};

also, I think your ng-repeat should be attached to an element.

<div ng-repeat="data in dailyreportsResults.data">
   {{data.countryName}}
   {{data.units}}
</div>

answered Feb 27, 2013 at 22:20

Coder1

13.4k16 gold badges65 silver badges91 bronze badges

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

Collectives™ on Stack Overflow

Iterate JSON response from API using AngularJS ngResponse

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related