Struggling with ensuring that Angular-JS pauses and waits for an asynchronous call to complete before moving on

Question

Struggling with ensuring that Angular-JS pauses and waits for an asynchronous call to complete before moving on

Understanding the use of promises in Angular for handling async operations is crucial, but I'm struggling to implement it effectively in this scenario.

function fetchLineGraphData(promises){
    var dataPoints = [];
    for (var i = 0; i < promises.length; i++) {
        $http.get('/file/tsDataPoints/'+promises[i].unit+"?startDate="+promises[i].startTs+"&endDate="+promises[i].endTs+"&startState="+promises[i].startState+"&endState="+promises[i].endState).success(function(data){
            dataPoints.push(data);
            console.log(data);
        });
    }
    console.log(dataPoints);
    return dataPoints;
}

The challenge lies in dealing with an array of data to construct multiple queries instead of just one. How should I approach this? Any concrete examples or guidance would be greatly appreciated. Thank you.

javascript ajax angularjs

Answer 1

Answer №1

When using $http in AngularJS, it returns a promise. By combining $q.all with an array of promises, you can ensure that all promises are resolved before proceeding. Here's how you can achieve this:

promises = promises.map(function(promise){
    return $http.get('/fetch/data/'+promise.id+"?start="+promise.startDate+"&end="+promise.endDate);
});

$q.all(promises).then(function(resultsArray){
    console.log(resultsArray); // array containing results from all the $http requests
});

Note:
If you need to actually return the data from a function, you can do so like this:

function fetchData(promises){
    promises = promises.map(function(promise){
        return $http.get('/fetch/data/'+promise.id+"?start="+promise.startDate+"&end="+promise.endDate);
    });        
    return $q.all(promises);
}

You can then call the function like this:

fetchData(dataPromises).then(function(resultsArray){ 
    // handle the results accordingly
});

Answer 2

When using $http in AngularJS, it returns a promise. By combining $q.all with an array of promises, you can ensure that all promises are resolved before proceeding. Here's how you can achieve this:

promises = promises.map(function(promise){
    return $http.get('/fetch/data/'+promise.id+"?start="+promise.startDate+"&end="+promise.endDate);
});

$q.all(promises).then(function(resultsArray){
    console.log(resultsArray); // array containing results from all the $http requests
});

Note:
If you need to actually return the data from a function, you can do so like this:

function fetchData(promises){
    promises = promises.map(function(promise){
        return $http.get('/fetch/data/'+promise.id+"?start="+promise.startDate+"&end="+promise.endDate);
    });        
    return $q.all(promises);
}

You can then call the function like this:

fetchData(dataPromises).then(function(resultsArray){ 
    // handle the results accordingly
});

Struggling with ensuring that Angular-JS pauses and waits for an asynchronous call to complete before moving on

Answer №1

Similar questions

Presentation Slider (HTML, CSS, JavaScript)

Having trouble with the automatic closing feature of Bootstrap drop down in React?

Guide to adding items to an array in json-server using a JavaScript-created database

Update the HTML page when switching between tabs

Retrieving InnerHTML of a Rendered DOM Element in AngularJS

What is the syntax for creating a zip function in TypeScript?

The functionality of CKEDITOR.tools.getindex has not been found

Exploring ways to assign a value to an HTML element utilizing Jquery in combination with ASP.NET MVC 4 complex model information

Despite the correct value being displayed in the console.log, the Textfield is not responding to the Reducer

``There seems to be a malfunction with the modal feature in the asp.net

Emulate the CSS hover effect with jQuery 코드 희미한

The combination of loading and scrolling JavaScript code is not functioning properly on the website

Using formidable to parse form data in Node.js

Unable to designate decimal value as the default in DropdownListFor in ASP.NET Core when utilizing JavaScript

Jasmine spying on a standalone function that is not a method of an object

Is it necessary to encode the content before transmitting HTML in JSON from the server to the client?

How can I generate a true or false response for an AJAX form submission depending on the data received from a PHP file?

Grid layout with card tiles similar to Google Plus

Utilizing the .map() function to retrieve an object from an array without a key

Looking for guidance on restructuring a JSON object?