angularjs - combine data from for loop api calls

Question

I have this API that has pages 1-10 and I want to loop through the page numbers to make the API calls

app.factory('companies', ['$http', function($http) {
    var i;
    for (i = 1; i < 11; i++) {
        var data = $http.get('https://examplepage.com/wp-json/wp/v2/categories?per_page=50&page=' + i);
        console.log('list', data);
    }
    return data;
}]);

This is what I get when I console log the data for all 10 API calls JSON data

My attempt to display all of the data (list of names), but it seems as though it's only taking the last API call and displaying it. How do I combine all of the returned data into one object to display the list of name from pages 1-10?

app.controller('HomeController', ['$scope', 'companies', function($scope, companies) {
    companies.success(function(data) {
        $scope.companies = data;
        console.log('companies', $scope.companies);
    });
}]);

view.html

<div class="container" ng-controller="HomeController">
        <div ng-repeat="company in companies" class="list">
            <a href="#/{{ company.id }}" class="company-name">{{ company.name }}</a>
        </div>
</div>

The .success method is deprecated and been removed from V1.6. — georgeawg
– georgeawg, Commented Jan 4, 2019 at 17:09

georgeawg · Accepted Answer · 2018-10-11 22:11:59Z

Each call to the $http service returns a promise. You need to use $q.all to consolidate the promises:

app.factory('companies', function($http,$q) {
    return { tenPagesPromise: tenPagesPromise };

    function tenPagesPromise () {
        var indices = Array.from({length:10}).map((x,i)=>i);
        var promises = indices.map(i=>pagePromise(i));
        return $q.all(promises).then(responseArray => {
            var dataArray = responseArray.map(x=>x.data);
            return dataArray.reduce((t,x)=>t.concat(x),[]);
        });
    }

    function pagePromise(i) {
        var url = "https://examplepage.com/wp-json/wp/v2/categories";
        var params = { per_page: 50, page: i };
        var config = { params: params }
        promise = $http.get(url,config);
        return promise;
    }
});

Usage:

companies.tenPagesPromise.then(data => {
    $scope.companies = data;
}).catch(function(errorResponse) {
    console.log(errorResponse);
});

For more information, see AngularJS $q Service API Reference - all.

reptilicus · Accepted Answer · 2018-10-11 17:02:02Z

0

You need to resolve the promise and then add the data to an array, something like this:

app.factory('companies', ['$http', function($http) {
    data = []
    for (let i = 1; i < 11; i++) {
        $http.get('https://examplepage.com/wp-json/wp/v2/categories?per_page=50&page=' + i)
          .then( function(resp) {
             console.log(resp.data);
             data.push(resp.data);
           })
    }
    return data;
}]);

answered Oct 11, 2018 at 17:02

reptilicus

10.4k6 gold badges59 silver badges80 bronze badges

Collectives™ on Stack Overflow

angularjs - combine data from for loop api calls

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related