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

Having trouble with the JSON format within the 'operations' field in the formData of your Next.js application?

What steps do I need to take in order to ensure that each webpage displays unique thumbnails?

Synchronization issue between CSS style and Javascript is causing discrepancies

Using Yii to attach an onclick event to CLinkPager for every pager link

Is there a way to showcase all the information in products while also organizing it in the same manner that I have?

What distinguishes between the methods of detecting falsy and truthy values?

"Exploring the Mini Drawer feature on Material UI brings up a whole new page for the Link

Locate the selected radio button's label

Streamline your processes by automating jQuery AJAX forms

A server-side rendered page in Next.js that functions without the need

Angular handling multiple query parameters

Encountering issues with sbrautaset's JSON-framework Objective-C: Receiving null when parsing objectWithString

Check if certain entries in the JSON object already exist by iterating through it

Utilize underscore's groupBy function to categorize and organize server data

Utilizing the Twitter API 1.1 to retrieve a list of tweets

Tips for adding a sequence of numbers to a database using Angular

Guide on how to reference the Html directory using the path module in Node Js

Exploring JavaScript Object-Oriented Programming (OOP) concepts. Delving into the

Creating a custom Chrome extension with the ability to modify the pop-up window instead of the web page

Is it possible for a method within a class to retrieve properties from a different object within the same class?