I have an AngularJs app in which I need to make $http post calls in a loop. Here is my code:
var promisesArray = [];
for(i = 0; i < 28; i++) {
promisesArray.push($http({
method: "post",
url: "/studentanswers",
data: {
studentName: "abc",
answerImage: "sdf",
questionPrompt: 1
}
}));
}
$q.all(promisesArray).then(function(data){
console.log("success!!!!");
});
For some reason, it is not posting all the items in the collection. I am aware that browsers usually do not allow more than 6 async post calls. From what I understood, $q.all was a way around it. Also, even if I comment out the $q.all part, it doesn't matter because the post calls get executed nonetheless.
I would greatly appreciate any help!
Be aware that $q.all is not resilient. It will terminate with the first rejected promise. But that really isn't your problem.
You need to chain your posts to avoid the browser limit of simultaneous posts.
var promisesList = [];
var promiseMinusOne = $q.when();
for (var i = 0; i < 28; i++) {
//begin IIFE closure
function(i) {
//chain off promiseMinusOne
var httpPromise =
promiseMinusOne.catch (function (e) {
return e;
}) .then (function (r) {
return $http({ method: "post",
url: "/studentanswers",
data: answerList[i]
})
});
promisesList.push(httpPromise);
promiseMinusOne = httpPromise;
}(i);
//end IIFE closure
};
var chainablePromise =
promiseMinusOne.catch (function (e) {
return (e);
}) .then (function (r) {
//process the promisesList
});
Notice, that for promiseMinusOne, the use of .catch and return in order to continue the list in the event of a rejection of one of the items.
Related
///Returning JSON 1
$http.get("url1").
then(function (response) {
$scope.foo = response.data;
});
///Returning JSON 2
$http.get("url2").
then(function (response) {
$scope.foo = response.data;
});
///Returning JSON (n)
$http.get("n").
then(function (response) {
$scope.foo = response.data;
});
Can I somehow concat these JSON objects into one? The reason is that I have ALOT of data and since I rather would like to display alot of data for the user to filter through than to have them click through 1000 pages in a SPA, I would like to join them if that's possible (in a reasonable manner ofcourse).
EDIT
I was thinking something like this
var url ="";
for (... i < 100...) {
url = "http://url.com"+i+"";
$http.get(url).
then(function(response){
$scope.foo.concat(response.data);
}
);
}
Update
I've managed to join the JSON returns into an array of objects. But the problem is that this array now contains objects which in itself contains an object which in itself contains an array of objects... yup!
If it's array then you can concat it.
Initialize empty array first
$scope.foo = [];
$http.get("url1").
then(function (response) {
$scope.foo.concat(response.data);
});
Use $q.all to create a promise that returns an array:
function arrayPromise(url, max)
var urlArray = [];
for (let i=0; i<max; i++) {
urlArray.push(url + i);
};
var promiseArray = [];
for (let i=0; i<urlArray.length; i++) {
promiseArray.push($http.get(urlArray[i]);
};
return $q.all(promiseArray);
});
To fetch nested arrays, chain from the parent:
function nestedPromise (url, max) {
var p1 = arrayPromise(url + "item/", max);
var p2 = p1.then(function(itemArray) {
var promises = [];
for (let i=0; i<itemArray.length; i++) {
var subUrl = url + "item/" + i + "/subItem/";
promises[i] = arrayPromise(subUrl, itemArray[i].length);
};
return $q.all(promises);
});
return p2;
};
Finally resolve the nested promise:
nestedPromise("https://example.com/", 10)
.then(function (nestedArray) {
$scope.data = nestedArray;
});
It is important to use a return statement at all levels of the hierarchy: in the .then methods and in the functions themselves.
Chaining promises
Because calling the .then method of a promise returns a new derived promise, it is easily possible to create a chain of promises.
It is possible to create chains of any length and since a promise can be resolved with another promise (which will defer its resolution further), it is possible to pause/defer resolution of the promises at any point in the chain. This makes it possible to implement powerful APIs.
— AngularJS $q Service API Reference - Chaining Promises
You can wait for the n requests to finish and then do whatever you want with the object returned.
$q.all($http.get("url1"), $http.get("url2"), $http.get("url3"))
.then(function (responses) {
// This function is called when the three requests return.
// responses is an array with the first item being the result of
// fetching url1, the second fetching url2, etc.
// Depending on what the response looks like you may want to do
// something like:
$scope.data = angular.merge(responses[0], responses[1] /* etc */);
});
I am uploading attachments using rest api in SharePoint 2013,for this I need to call upload attachment method on synchronous.
Because If I call upload attachment method asynchronous I am getting 409 conflict error.
How to chain promise objects in for loop.i.e I want to call second attachment method in first attachment success and so on..
Please help me in best approach of chaining of promises in for loop.
Common method for saving attachments:
var saveFileAngularJS = function (file, url) {
var deferred = $q.defer();
getFileBuffer(file).then(function (fileArrBuffer) {
$http({
method: 'POST',
url: baseUrl + url,
headers: {
'Accept': 'application/json;odata=verbose',
'Content-Type': undefined,
'X-RequestDigest': jQuery("#__REQUESTDIGEST").val()
},
data: new Uint8Array(fileArrBuffer),
transformRequest: []
}).then(function successCallback(data) {
deferred.resolve(data);
alert('Successfully saved.', data);
}, function errorCallback(error) {
deferred.reject(error);
alert('Failed to save!!!.', error);
});
});
return deferred.promise;
};
Method calling :
for (var i = 0; i < $scope.files.length; i++) {
var file = $scope.files[i]._file;
var response = lssDealService.insertAttachment(transactionId, file);
}
var insertAttachment = function (dealId, file) {
var attachmentUrl = listEndPoint + "/GetByTitle('TransactionList')/GetItemById(" + dealId + ")/AttachmentFiles/add(FileName='" + file.name + "')";
return baseService.saveFile(file, attachmentUrl);
};
Insert attachment will call SaveFile method.
I want to run this for loop sequentially, once the loop has been completed I need to process all promises and display success message to user.
Please help me to writing the chaining promises in effective way.
Lets say you have the attachements as an array,
function uploadMyAttachements() {
return myAttachements.reduce(function(promise, attachment) {
return promise.then(function () {
return upload(attachment);
})
.then(function(result) {
console.log('RESULT FOR LAST UPLOAD', result);
});
}, Promise.resolve());
}
function upload(attachment) {
//upload the attachment to sharepoint
//and return a promise here
}
uploadMyAttachements().catch(function(err) {
//if anything in the promise chain fails
//it stops then and there and CATCHED here
});
Now whats happening here, using the Array.reduce, we create a chain of promises like shown below
upload(0).then(handleResult_0).upload(1).then(handleResult_1)....
and it execute one by one as you expected
Throwing my 2 pennies:
$scope.attachments = []; //modified via binding.
function uploadAttachments(){
//Reduce the files array into a promise array with the uploadOne method
//then return the promise when every promise has been resolved or one has rejected.
return $q.all($scope.attachments.reduce(uploadOne, []));
}
function uploadOne(file){
//Upload one, return promise. Use $http or $resource.
}
//Note - a more advanced way of doing this would be to send the files as batch (one
//$http post) as FormData. There are some good wrappers for angular.
$scope.upload = function(){
uploadAttachments().then(function(results){
//Array of results
}).catch(function(e){
//Error handler
});
}
Given the following Angular 1.5 Component Controller...
'use strict'
function MyController($http){
//The template variable for cloning on a form
this.myVarTemplate = {};
//The Data I wish to send to the server
this.myVarTemplate.data = {};
//Other form specific / callback data
this.myVarTemplate.meta = {};
this.myVarArray = [];
//A container of raw data I'm parsing for example, on whitespace bound to a text input
this.rawInput = '';
this.parse = function(){
var temp = this.rawInput.split(' ');
for( var i = 0; i < temp.length; i++){
var container = angular.copy(this.myVarTemplate);
container.data = temp[i];
this.myVarArray.push(container);
}
}
this.upload = function(){
for(var i = 0; i < this.myVarArray.length; i++){
$http({
method: 'POST',
url: <url here>,
data: this.myVarArray[i]
}).then(function(response){
//My Success callback won't work!!!!
//Response logs successfully, data is retrieved
console.log(response);
//this.myVarArray.meta is undefined??
//console.log(this.myVarArray) is undefined
this.myVarArray[i].meta.reply = response.data;
}, function(message){
//Never been an issue here
alert('Something Bad happened? doesn't happen');
}).finally(function(){
//Works
this.myVarArray[i].meta.wasSent = true;
});
}
}
})
I am trying to return a batch of AJAX query results to their proper corresponding form objects. It seems as though this.myVarArray is undefined within the context of the $http service success callback. Why is this? Is this a quirk of Angular or of Javascript itself? I understand that the $http service returns a promise, but that should be resolved within the context of the callback. Why is myVarArray undefined?
Many thanks in advance for any insight.
Edited: Fixed my example code... :)
this.myVarArray is an array of string based on what has been split from raw input in your parse. You are trying to assign an object property (.meta) to a string array element. You could try something along the lines of:
this.myVarObjArray;
this.rawInput = '';
this.parse = function(){
var temp = this.rawInput.split(' ');
var valArray = []
for( var i = 0; i < temp.length; i++){
valArray.push(angular.copy(temp[i]));
this.myVarObjArray[i] = { val: valArray};
}
}
this.upload = function(){
angular.forEach(this.myVarObjArray, function(obj,v){
$http({
method: 'POST',
url: <url here>,
data: obj.val
}).then(function(response){
//My Success callback won't work!!!!
//Response logs successfully, data is retrieved
console.log(response);
//this.myVarArray.meta is undefined??
//console.log(this.myVarArray) is undefined
obj.meta = {reply :response.data};
....
})
Essentially your trying to assign an object property to a string array element. This won't work. My syntax might not be 100%. If you pull into a plunker i'll get a working example for you. This should get you on the right track.
$http({method: 'GET', url: '/xxx/xxx/xas'}).success(function(data) {
$scope.website = data.websites;
});
$http({method: 'GET',url: '/xx/xasxxx?websiteId='+$scope.website.websiteId}).success(function(data) {
$scope.onlinedata1 = data.coupons;
});
I try to get websiteID from top url and pass that id in to 2nd url .my json data structure
"websites":[{
"websiteName":"Flipkart",
"websiteId":"1",
},
{
"websiteName":"asas",
"websiteId":"5",
}]
Try to pass every id one by one. I am using AngularJS v1.2.17.
Move the second HTTP call within the success callback of the first one:
$http({method: 'GET', url: '/xxx/xxx/xas'}).success(function(data) {
$scope.website = data.websites;
for (var i = 0; i < data.websites.length; i++)
{
$http({method: 'GET',url: '/xx/xasxxx?websiteId='+data.websites[i].websiteId}).success(function(data) {
$scope.onlinedata1 = data.coupons;
});
}
});
This can be simplified considering that your requests are GETs:
$http.get('/xxx/xxx/xas')
.then(function(res) {
for (var i = 0; i < res.data.websites.length; i++)
{
$http.get('/xx/xasxxx?websiteId='+res.data.websites[i].websiteId)
.then(function(res) {
$scope.onlinedata1 = res.data.coupons;
});
}
});
Please note that the above will issue one request for each website returned by the API. If you have control over the API you might want to consider accepting multiple website IDs on the second URL resource (/xx/xasxxx?websiteIds=1,5,7,12,56) so as to limit the number of requests issued by the client.
Use $q - service in module ng
A service that helps you run functions asynchronously, and use their return values (or exceptions) when they are done processing.
I have a function that checks for for records and if they exist it downloads them for each item. This is a function that happens with in a loop so there can me many records. I thought that I was using $Q properly to deffer each $http request to wait for one after each other so they do not all happen at the same time but they all fire at the same time still.
I have seen $q.defer(); but do not understand how to use it in my implementation. How would this be written properly deferring each call until the one before is complete?
CheckRecords: function(obj) {
var promise;
var promises = [];
if (obj.BD.img == 'checkedRecord') {
var objBDUrl = 'services/GetSurveyBD/?id=' + obj.BD.ID;
promise = $timeout(function(){
$http.get(objBDUrl, { cache: true }).then(function(response) {
obj.BD.ID = obj.BD.ID;
obj.BD.data = response.data;
});
}, 250);
promises.push(promise);
}
if (obj.MR.img == 'checkedRecord') {
var objMRUrl = 'services/GetMR/?id=' + obj.MR.ID;
promise = $timeout(function(){
$http.get(objMRUrl, { cache: true }).then(function(response) {
obj.MR.ID = obj.MR.ID;
obj.MR.data = response.data;
});
}, 250);
promises.push(promise);
}
$q.all(promises).then(function(){
return obj;
});
}
The function $q.all just ensures that all requests completed, the requests are still executed immediately, but their results are deferred. If you want to control the execution order you, do your requests in the result function.
$q
- service in module ng
A service that helps you run functions asynchronously, and use their return values (or exceptions) when they are done processing.