I have a question in regards to asynchronous data calls in AngularJS.
The issue is that I will be recieving multiple objects in an array from one API call, and I will have to extend those objects with data from a different API call.
I was thinking of having nested async calls, but my logic falls a bit short in terms of how this would work with the $q service. I have a service which will return the object which has been extended with the second call so I can use this in a controller for display in a view.
The first API call returns some parameters which I need for the second API call in order to get the relevant data for which I will return back to the controller.
I will have to loop inside the first call so I can then run the second API call inside of that, but how am I going to return this back to my controller? I cannot resolve when the first loop has been run, because well, it explains itself.
What is the go-to solution for something like this?
Edit, my issue in pseudo-javascript:
returnListOfStuff().then(function (data) {
var result = data.Result;
for (var i = 0; i < result.length; i++) {
var dataForListItem = null;
returnDataForListItem(result[i].ID).then(function (data) {
dataForListItem = data;
});
for (prop in dataForListItem[0]) {
result[i].prop = dataForListItem[0][prop];
}
}
return result;
});
As is apparent, this won't work, considering it will only fetch the results from the first call returnListOfStuff(), because what is happening inside the for loop is not yet resolved. I can't really figure out how to do this with $q.all(), because I don't have the parameters from the returnListOfStuff function yet
I can't really figure out how to do this with $q.all(), because I don't have the parameters from the returnListOfStuff function yet
You can just do it in the then callback where you have them.
You can return the promise that $q.all yields from the callback to get a promise for the propped up result.
returnListOfStuff().then(function (data) {
var result = data.Result;
return $q.all(result.map(function(resultItem) {
return returnDataForListItem(resultItem.ID).then(function (data) {
for (prop in data[0]) {
resultItem[prop] = data[0][prop];
}
return resultItem;
});
}));
});
Try use $q.all() for this:
var loadQ = [];
var dataForListItem = null;
for (var i = 0; i < result.length; i++) {
loadQ.push(returnDataForListItem(result[i].ID));
}
$q.all(loadQ).then(function(values){
dataForListItem = values;//or values[0], I dnt known Your data structure;
});
If You will have problem with i value, try use:
for (var i = 0; i < result.length; i++) {
(function(e) {
loadQ.push(returnDataForListItem(result[e].ID));
})(i);
}
Related
I don't have a lot of experience with JavaScript closures nor AngularJS promises. So, here is my scenario
Goal:
I need to make $http requests calls within a for loop
(Obvious) problem
Even though the loop is done, my variables still have not been updated
Current implementation
function getColumns(fieldParameters)
{
return $http.get("api/fields", { params: fieldParameters });
}
for(var i = 0; i < $scope.model.Fields.length; i++)
{
var current = $scope.model.Fields[i];
(function(current){
fieldParameters.uid = $scope.model.Uid;
fieldParameters.type = "Columns";
fieldParameters.tableId = current.Value.Uid;
var promise = getColumns(fieldParameters);
promise.then(function(response){
current.Value.Columns = response.data;
}, error);
})(current);
}
//at this point current.Value.Columns should be filled with the response. However
//it's still empty
What can I do to achieve this?
Thanks
If I understand your question correctly, you have a list of fields that you need to do some work on. Then when all of that async work is done, you want to continue. So using the $q.all() should do the trick. It will resolve when all of the list of promises handed to it resolve. So it's essentially like "wait until all of this stuff finishes, then do this"
You could try something like this:
var promises = [];
for(var i=0; i< $scope.model.Fields.length; i++) {
var current = $scope.model.Fields[i];
promises.push(getColumns(fieldParameters).then(function(response) {
current.Value.Columns = response.data;
}));
}
return $q.all(promises).then(function() {
// This is when all of your promises are completed.
// So check your $scope.model.Fields here.
});
EDIT:
Try this since you are not seeing the right item updated. Update your getColumns method to accept the field, the send the field in the getColumns call:
function getColumns(fieldParameters, field)
{
return $http.get("api/fields", { params: fieldParameters}).then(function(response) {
field.Value.Columns = response.data;
});
}
...
promises.push(getColumns(fieldParameters, $scope.model.Fields[i])...
var promises = [];
for(var i = 0; i < $scope.model.Fields.length; i++)
{
var current = $scope.model.Fields[i];
promises.push(function(current){
//blahblah
return promise
});
}
$q.all(promises).then(function(){
/// everything has finished all variables updated
});
I understand using promises in simple scenarios but currently really confused on how to implement something when using a for loop and some updates to local sqlite database.
Code is as follows
surveyDataLayer.getSurveysToUpload().then(function(surveys) {
var q = $q.defer();
for (var item in surveys) {
var survey = surveys[item];
// created as a closure so i can pass in the current item due to async process
(function(survey) {
ajaxserviceAPI.postSurvey(survey).then(function(response) {
//from response update local database
surveyDataLayer.setLocalSurveyServerId(survey, response.result).then(function() {
q.resolve; // resolve promise - tried only doing this when last record also
})
});
})(survey) //pass in current survey used to pass in item into closure
}
return q.promise;
}).then(function() {
alert('Done'); // This never gets run
});
Any help or assistance would be appreciated. I'm probably struggling on how best to do async calls within loop which does another async call to update and then continue once completed.
at least promises have got me out of callback hell.
Cheers
This answer will get you laid at JS conferences (no guarantees though)
surveyDataLayer.getSurveysToUpload().then(function(surveys) {
return Promise.all(Object.keys(surveys).map(function(key) {
var survey = surveys[key];
return ajaxserviceAPI.postSurvey(survey).then(function(response){
return surveyDataLayer.setLocalSurveyServerId(survey, response.result);
});
}));
}).then(function() {
alert('Done');
});
This should work (explanations in comments):
surveyDataLayer.getSurveysToUpload().then(function(surveys) {
// array to store promises
var promises = [];
for (var item in surveys) {
var survey = surveys[item];
// created as a closure so i can pass in the current item due to async process
(function(survey) {
var promise = ajaxserviceAPI.postSurvey(survey).then(function(response){
//returning this promise (I hope it's a promise) will replace the promise created by *then*
return surveyDataLayer.setLocalSurveyServerId(survey, response.result);
});
promises.push(promise);
})(survey); //pass in current survey used to pass in item into closure
}
// wait for all promises to resolve. If one fails nothing resolves.
return $q.all(promises);
}).then(function() {
alert('Done');
});
Awesome tutorial: http://ponyfoo.com/articles/es6-promises-in-depth
You basically want to wait for all of them to finish before resolving getSurveysToUpload, yes? In that case, you can return $q.all() in your getSurveysToUpload().then()
For example (not guaranteed working code, but you should get an idea):
surveyDataLayer.getSurveysToUpload().then(function(surveys) {
var promises = [];
// This type of loop will not work in older IEs, if that's of any consideration to you
for (var item in surveys) {
var survey = surveys[item];
promises.push(ajaxserviceAPI.postSurvey(survey));
}
var allPromise = $q.all(promises)
.then(function(responses) {
// Again, we want to wait for the completion of all setLocalSurveyServerId calls
var promises = [];
for (var index = 0; index < responses.length; index++) {
var response = responses[index];
promises.push(surveyDataLayer.setLocalSurveyServerId(survey, response.result));
}
return $q.all(promises);
});
return allPromise;
}).then(function() {
alert('Done'); // This never gets run
});
Yet another question about promises. I have this scenario:
Service.prototype.parse = function (data) {
var deferred = $.Deferred();
var arr = [];
for (var i = 0; i < data.length; i++) {
var details = new Details();
$.when(details).then(function (data) {
arr.push(data);
deferred.resolve(arr);
});
}
return deferred.promise;
};
Somewhere else in the code:
...
$.when(parse()).then(function (resp) {
//...
});
The promises get resolved at some point but initially resp has a length of 1.
How to wait for parse() to resolve everything and return a array?
No need for a deferred anti pattern (explicit construction) or for explicit array construction. Your code can be simplified to:
Service.prototype.parse = function (data) {
return $.when.apply($, data.map(function(x){
return new Details();
}).then(function(){ return arguments; });//.then(Array.of); // instead, if want array
};
Some general advice:
You're ignoring the item you're iterating in the data, I assume you don't do that in your real code but just making sure.
It's generally not the best idea to perform async IO in a constructor. Please consider separating construction and initialization.
You should consider using native promises (or a library) or using jQuery 3.0.0 which supports non problematic promises.
Please try this:
Service.prototype.parse = function(data) {
var detailsArr = [];
for (var i = 0; i < data.length; i++) {
var details = new Details();
detailsArr.push(details);
}
return $.when.apply($, detailsArr).then(function(){
return Array.prototype.slice.call(arguments);
});
};
Here we put all Details into an array, use $.when.apply($, arr) to wait for all Details get resolved. When it's done, each Details' return data will be passed to callback function as one parameter, so the call back function will receive total data.length number of parameters. Then we use Array.prototype.slice.call to convert all parameters to an array and return the result.
For your reference:
What does $.when.apply($, someArray) do?
How can I convert the "arguments" object to an array in JavaScript?
I am new to JavaScript and trying to understand how to write some code that makes a number of asynchronous calls to two third party API based on the contents of a previously generated input list.
Once all the data has been collected, I want to create a chart.
I have tried doing it a number of ways but from what I've read, using promises seems to be the recommended way. My brain is being twisted in knots, firstly using the traditional async model then trying to understand promises.
Can anyone point me in the right direction please?
var countries = [];
// countries ends up with 10-30 country names in previous code
var total_population = 0;
for(var n=0; n<countries.length; ++n) {
var country_data=new CountryData();
// async function that fetches country data
country_data.get(countries[n]);
country_data.onDone = function() {
var capital=this.capital;
var city_data=new CityData();
// async function that fetches city data
city_data.get(capital);
city_data.onDone = function() {
total_population += this.population;
}
}
}
// make a chart with total_population for example.
The general pattern I use in cases like this is to push all of my promises into an array, then set up a promise action that gets all the returned values and does what I want (console.log is your friend to see how the data is returned):
Edit: country_data.get must return a promise object for this to work.
var countries = ['US', 'CA', 'GB'];
var promises = [];
// countries ends up with 10-30 country names in previous code
for(var n=0; n<countries.length; ++n) {
var country_data=new CountryData();
// async function that fetches country data and returns a promise
promises.push(country_data.get(countries[n]));
}
//This will fire only once all async calls complete
Promise.all(promises).then(function(data) {
console.log(data);
//do stuff with data from all calls
}
Warning: I normally work with jquery which uses slightly different syntax, and jsfiddle is down so this isn't fully tested.
Assuming CountryData#get and CityData#get return promises that resolve the requested country/city data, this is how I would handle this:
var total_population = 0;
var promise = Promise.all(countries.map(function(country) {
return new CountryData().get(country)
.then(function(countryData) {
return new CityData().get(countryData.capital);
})
.then(function(cityData) {
total_population += cityData.population;
});
}));
edit: changed the solution to return a single promise
I'm a little confused how to determine when async function called multiple times from another one is finished a call from the last iteration:
function MainAsyncFunction(callback) {
for (var i = 0; i < 10; i++) {
SubAsyncFunction(function(success) {
if (i >= 10 && success) { // THIS IS WRONG?!
callback(true); // happens too early
}
});
}
};
function SubAsyncFunction(callback) {
SubSubAsyncFunction(function() {
callback(true);
});
}
What I'm doing is calling the Google Distance Matrix service, which has a limitation of 25 destinations, hence I'm having to split my array of destinations to call this service multiple times but I don't understand when it's finished.
and in the main bit of code I can tell that the second iteration of the loop in the MainAsyncFunction hasn't yet completed when it does a call back.
I think my problem is I haven't got my head around the order of events when dealing with Async functions in JavaScript... please explain how the subject is normally achieved.
You could use the jQuery Deferred object, which acts as a token representing the status of an async operation.
The following is a simplified example:
//set up your sub method so that it returns a Deferred object
function doSomethingAsync() {
var token = $.Deferred();
myAsyncMethodThatTakesACallback(function() {
//resolve the token once the async operation is complete
token.resolve();
});
return token.promise();
};
//then keep a record of the tokens from the main function
function doSomethingAfterAllSubTasks() {
var tokens = [];
for (var i=0; i < 100; i++) {
//store all the returned tokens
tokens.push(doSomethingAsync());
}
$.when.apply($,tokens)
.then(function() {
//once ALL the sub operations are completed, this callback will be invoked
alert("all async calls completed");
});
};
The following is an updated version of the OP's updated code:
function MainAsyncFunction(callback) {
var subFunctionTokens = [];
for (var i = 0; i < 10; i++) {
subFunctionTokens.push(SubAsyncFunction());
}
$.when.apply($,subFunctionTokens)
.then(function() {
callback(true);
});
};
function SubAsyncFunction() {
var token = $.Deferred();
SubSubAsyncFunction(function() {
token.resolve();
});
return token.promise();
};
Perhaps the ajaxStop() event? This is a jQuery event that only fires when all active AJAX requests are completed.
The problem is that the value of i is constantly changing in the loop, finally being out of bounds after failing the loop conditional.
The easiest way to fix this is:
for( i=0; i<5; i++) { // or whatever your loop is
(function(i) {
// the value of i is now "anchored" in this block.
})(i);
}