Combining data from multiple API calls in a for loop with AngularJS

Question

Combining data from multiple API calls in a for loop with AngularJS

I'm working with an API that contains pages from 1 to 10 and my goal is to cycle through these page numbers to make the necessary 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;
}]);

After making all 10 API calls, I logged the data and you can see the results in this JSON data image.

However, when I try to display the list of names received from all 10 API calls, it seems like only the data from the last call is being used. How can I merge all the returned data into one object so I can display a complete list of names from pages 1 to 10?

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

In the view.html file:

<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>

javascript angularjs json api

Answer 1

Answer №1

To simplify handling multiple promises returned by the $http service, utilize $q.all to consolidate them:

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;
    }
});

How to use this in your code:

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

To dive deeper into this topic, visit AngularJS $q Service API Reference - all.

Answer 2

To simplify handling multiple promises returned by the $http service, utilize $q.all to consolidate them:

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;
    }
});

How to use this in your code:

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

To dive deeper into this topic, visit AngularJS $q Service API Reference - all.

Answer 3

Answer №2

To successfully handle this situation, make sure to fulfill the promise first before appending the information to an array. Take a look at this example:

app.service('organizations', ['$http', function($http) {
    var storage = [];
    for (let num = 1; num < 11; num++) {
        $http.get('https://samplewebsite.com/wp-json/wp/v2/categories?per_page=50&page=' + num)
            .then(function(response) {
                console.log(response.data);
                storage.push(response.data);
            })
    }
    return storage;
}]);

Answer 4

To successfully handle this situation, make sure to fulfill the promise first before appending the information to an array. Take a look at this example:

app.service('organizations', ['$http', function($http) {
    var storage = [];
    for (let num = 1; num < 11; num++) {
        $http.get('https://samplewebsite.com/wp-json/wp/v2/categories?per_page=50&page=' + num)
            .then(function(response) {
                console.log(response.data);
                storage.push(response.data);
            })
    }
    return storage;
}]);

Combining data from multiple API calls in a for loop with AngularJS

Answer №1

Answer №2

Similar questions

sending the properties from the menu component to the dish details

Eliminate any undefined data in the popup map of Javascript

jQuery replacement for replaceChild method

Is there a way to specifically use nl2br() for just one row when sending everything to an array?

Error: VueJS mixins do not include the property definition

Unable to locate module: '@material-ui/pickers' - Material UI React

I am looking to send an ajax request from the themes directory's loyalty.tpl file to the LoyaltyModule.php file in PrestaShop version 1.6.1.5

Choosing items from a JSON array using 2 specific requirements

What is the process for defining default prop data in Next.js?

Passing multiple parameters in URL for APIs using Next.js

Performing a JavaScript/jQuery callback to server without the need for an accompanying executable backend

Implementing Autocomplete search with jQuery Chosen plugin - a step-by-step guide

Access another page by clicking on a link within an HTML document

When the webpage first loads, the CSS appears to be broken, but it is quickly fixed when

How can I ensure that my function only returns a value once the ajax call has finished?

Working with variables passed from Node.js in Jade processing

Problems with displaying Wordpress content on your web browser

Utilize the datepicker function in jQuery version 1.6.3 to select a range of dates

Multiple loop in Node.js with Selenium

Paragraph Separated by Bullets Without Bullets At End of Line