I'm pretty new to Javascript. Please don't make it too harsh :)
I have two functions, both of which involve executing jQuery requests within for loops. For example,
function a(n,locations) {
for (var i = 0; i < n; i ++) {
$.ajax({
url: 'https://geocoder.cit.api.here.com/6.2/geocode.json',
type: 'GET',
dataType: 'jsonp',
jsonp: 'jsoncallback',
data: {
searchtext: input,
app_id: APP_ID,
app_code: APP_CODE,
},
success: function (data) {
handleData(data,locations);
}
});
}
The handleData() function would make changes to the empty array locations from the jQuery data. My function b(m) is of similar format but would use the updated locations as input.
Now, I have a c(n,m) in which I would like execute a() and b() sequentially:
function c(n,m) {
var locations = [];
a(n,locations);
b(m,locations);
}
From previous answers I understand that sequentially executing functions involving jQuery calls can be achieved by using promises (such as .then). However, this solution is only applicable when a(n) returns a promise, which is not achievable under the for-loop structure. Could you please share your insights on how to solve this issue? Thanks in advance for the help.
I would suggest recursion instead of your for loop. For example, you can call the function recursionExample like this,
function a(n) {
return new Promise ((resolve, reject) {
(function recursionExample(a) {
if (a === n) {
resolve;
} else {
$.ajax({ url: 'https://geocoder.cit.api.here.com/6.2/geocode.json',
type: 'GET',
dataType: 'jsonp',
jsonp: 'jsoncallback',
data: {
searchtext: input,
app_id: APP_ID,
app_code: APP_CODE,
},
success: function(data) {
handleData(data);
recursionExample(a + 1);
}
});
}
})(0);
});
}
This will then allow you to use the promise and .then functions. Like so...
function c(n,m) {
var locations = [];
a(n,locations)
.then (function() {
b(m,locations);
});
}
Related
Not a fronted or JavaScript so not able to understand why it's not able to find the defined function in the file. I am integrating Apple Pay and I am trying to call the back-end API based on certain event. Here is my code.
ACC.payDirect = {
_autoload: ['payDirect'],
session: null,
payDirect: function () {
let button = $('#mbutton');
if (button.length === 0) {
return;
}
$('#mbutton').on('click', this.onButtonClicked.bind());
},
onButtonClicked: function () {
if (!Session) {
return;
}
var request = getCartPaymentRequest();
this.requestSession("1234"); //getting error while calling this function
session.begin();
},
requestSession: function (validationURL) {
return new Promise(function (resolve, reject) {
$.ajax({
type: 'POST',
url: ACC.config.encodedContextPath + '/checkout/request_session',
data: JSON.stringify({ validationURL: validationURL }),
dataType: 'json',
contentType: 'application/json',
success: resolve,
error: reject
});
});
},
},
function getCartPaymentRequest() {
var result = "";
$.ajax({
type: 'GET',
url: ACC.config.encodedContextPath + '/checkout/payment-request',
dataType: 'json',
async: false,
success: function (response) {
result = response;
},
});
return result;
}
While calling the requestSession I am getting the following error
TypeError: this.requestSession is not a function. (In 'this.requestSession("1234")', 'this.abc' is undefined)
I am sure doing some basic mistake but not able to find out the root cause as why it's not able to find the second function while the first one seems to be working without any issue.
The problem is with the .bind method you called without any parameters.
Take the following example:
const obj2 = {
b: function (callback) {
callback()
}
};
const obj = {
a: function () {
obj2.b(this.c.bind())
},
c: function () {
console.log(this)
}
};
obj.a()
What will happen here is that the Window object will appear in the console.
This happens because the window is somewhat of the global context, and when running in the browser JavaScript's bind's parameter will default to the only context it can: the window.
What you need to do is call the .bind method using the ACC.payDirect as parameter as it will then bind it to the object and use the proper context, you could use a this but if the methodm was called with a different context would cause problems. An even better solution (provided you can use new ES features) is using arrow functions. They are much, much better to work with and won't give you headaches such as this.
I have a huge list of articles,
visually indicated by a table listing of article titles,
on which we have to perform a particular processing action,
processing items one after the other,
by sending a POST request with the id of that article,
while removing that row from the table listing, as a visual indicator of the progress.
This is what I used originally:
var article_ids = [1,2,...];
article_ids.each(function (value, index) {
var id = value;
jQuery.ajax({
type: "POST",
url: "index.php?process_article",
data: {article_id: id},
cache: false,
async: false
})
.done(function(reponse) {
console.log(response);
jQuery('.article-id-' + id).css('display', 'none');
});
});
And it works fine in FireFox, processing items one by one, removing corresponding rows from the table listing.
But in Google Chrome, all of these seem to be processed in one go, instead of these requests happening one after the completion of the other.
After a bit of googling, found references saying to use Javascript Promises, which I couldn't figure out how to use for this case.
And then, instead, I changed the above, to the following recursive function, which seems to work fine on both Chrome and Firefox, with requests happening one after the other:
var article_ids = [1,2,...];
function processIds(ids) {
if (ids.length > 0) {
id = ids.shift();
console.log("Processing ID: " + id);
jQuery.ajax({
type: "POST",
url: "index.php?process_article",
data: {article_id: id},
cache: false
})
.done(function() {
jQuery('.article-id-' + id).css('display', 'none');
processIds(ids);
});
} else {
alert("Successfully processed all articles.");
}
}
processIds(article_ids);
DOUBTS:
Is this a good way to go about this?
How could we achieve the same using Javascript Promises?
The recursive solution you've suggested works and makes sense, IMO. In this situation I usually use Array.reduce, though.
Here's an example:
function processIds(ids) {
return ids.reduce((promise, nextId) => {
return promise.then(() =>
jQuery.ajax({
type: "POST",
url: "index.php?process_article",
data: { article_id: nextId },
cache: false,
})
);
}, Promise.resolve());
}
Note that the return values contained in the promises are thrown away in this example and only the very last value will be retained. It would be possible to modify this to capture and aggregate all return values if you desired.
It's also easy to extract this into something reusable. For example:
function forEachAsync(myArray, funcPromise) {
return myArray.reduce((promise, nextValue) => {
return promise.then(() => funcPromise(nextValue));
}, Promise.resolve());
}
And then you could use your new forEachAsync function as follows:
function processIds(ids) {
return forEachAsync(ids, processArticle);
}
function processArticle(id) {
return jQuery.ajax({
type: "POST",
url: "index.php?process_article",
data: { article_id: nextId },
cache: false,
});
}
I believe the latest versions of jQuery use promises that are compatible with JavaScript promises, but this is something you should check and be aware of.
I believe they were introduced in ES2015 and jQuery introduced compatibility in v3.0.
I'm trying to come up with a resource loader if you will, that will load many remote resources and then execute a final callback (like rendering a DOM based on the retrieve data from these requests).
Here's the function:
var ResourceLoader = function () {
this.requests = new Array();
this.FinalCallback;
this.Add = function (request) {
this.requests.push(request);
};
this.Execute = function() {
for (var x = 0; x < this.requests.length ; x++) {
var success = this.requests[x].success;
//if this is the last of the requests...
if (x == (this.requests.length - 1) && this.FinalCallback) {
$.when($.ajax({
url: this.requests[x].url,
dataType: 'json',
error: this.requests[x].error,
method: 'GET'
}).done(success)).then(this.FinalCallback);
}
else {
$.ajax({
url: this.requests[x].url,
dataType: 'json',
error: this.requests[x].error,
method: 'GET'
}).done(success);
}
}
};
};
And here's how I use it:
var apiUrl = Utilities.Api.GetWebApiUrl();
var loader = new Utilities.ResourceLoader();
loader.Add({
url: apiUrl + 'regions/get',
success: function (results) {
Filters.Regions = results;
}
});
loader.Add({
url: apiUrl + 'currentfactors/get/83167',
success: function (results) {
Filters.NbrEmployees = results;
}
});
loader.Add({
url: apiUrl + 'currentfactors/get/83095',
success: function (results) {
Filters.Industries = results;
}
});
loader.FinalCallback = RenderBody;
loader.Execute();
function RenderBody() {
console.log('render...');
}
Obviously, I'm expecting RenderBody to be executed last. But that's not what happening. What's ironic is that I remember doing something like that before, but lost the code... Looks like I'm having a brainfart here.
As you've tagged with promise - here's a really clean solution that uses Promise.all
this.Execute = function() {
Promise.all(this.requests.map(function(request) {
return $.ajax({
url: request.url,
dataType: 'json',
error: request.error,
method: 'GET'
}).done(request.success);
})).then(this.FinalCallback);
};
or ... using JQuery when
this.Execute = function() {
$.when.apply($, this.requests.map(function(request) {
return $.ajax({
url: request.url,
dataType: 'json',
error: request.error,
method: 'GET'
}).done(request.success);
})).then(this.FinalCallback);
};
Es6 Promise has solutions for your problem, there is no need to reinvent it unless the loading of resource groups is a specific goal to abstract. Set up a Promise object for each resource request, using the constructor to assign the resolve and reject callbacks appropriately for the XHR. Keep a collection (any Iterable will do) of individualPromise.then(individualCallback) results. Your final product is obtained by Promise.all(collectionOfPromises).then(finalCallback).
I have read a lot about promises but I'm still not sure how to implement it.
I wrote the folowing AJAX call with async=false in order for it to work, but I want to replace it with promise as I saw that async=false is deprecated.
self.getBalance = function (order) {
var balance;
$.ajax({
url: "/API/balance/" + order,
type: "GET",
async: false,
success: function (data) {
balance = data;
},
done: function (date) {
}
});
return balance;
}
Would you be able to help me? I just need an example to understand it.
As first point, you don't want to set an asynchronous call to false as it will lock the UI.
You could simplify your method returning the ajax object and the handle it as a promise.
self.getBalance = function (orderNumber) {
return $.ajax({
url: "/Exchange.API/accountInfo/balance/" + orderNumber,
type: "GET",
});
};
var demoNumber = 12;
self.getBalance(demoNumber).then(function(data){
console.log(data);
},function(err){
console.log("An error ocurred");
console.log(err);
});
Return promise object from getBalance method:
self.getBalance = function (orderNumber) {
return $.ajax({
url: "/Exchange.API/accountInfo/balance/" + orderNumber,
type: "GET"
});
}
and use it later like this:
service.getBalance().then(function(balance) {
// use balance here
});
I'm building an app in NodeJs and it involves sending external requests asynchronously. Previously I had one id:
# client
function sendAjax(id) {
$.ajax({
type: "POST",
url: "/fsfdsfd",
data: JSON.stringify({"id": id}),
contentType: "application/json; charset=utf-8",
dataType: "json",
}).done(function (data) {
//.....
# server
app.post("/dsfdsfd", function (req, res, nxt) {
var id = req.body.id;
anotherServerClient.sendExternalRequest(id), function(data) {
//success
//return the result, but when exactly?
res.end("ok");
}, function (e) {
// error, but when exactly?
res.end("error");
});
Now I have an array:
# client
function sendAjax(ids) {
$.ajax({
type: "POST",
url: "/fsfdsfd",
data: JSON.stringify({"ids": ids}),
contentType: "application/json; charset=utf-8",
dataType: "json",
}).done(function (data) {
//.....
# server
app.post("/dsfdsfd", function (req, res, nxt) {
var ids = req.body.ids;
for (var id in ids) {
anotherServerClient.sendExternalRequest(id), function(data) {
//success
//return the result
res.end("ok");
}, function (e) {
// error
res.end("error");
});
}
}
How can I know when the last operation in the loop "for (var id in ids) {" will finish to
return the result to the client only after that? What's the idiomatic and simple solition?
// server
app.post("/dsfdsfd", function (req, res, nxt) {
var ids = req.body.ids;
// create output array to collect responses
var output = [];
for (var id in ids) {
anotherServerClient.sendExternalRequest(id, function(data) {
// on success, push the response to the output array
output.push(data);
// check if all responses have come back, and handle send
// if the length of our output is the same as the list of requests
if(output.length >= ids.length){
//return the results array
res.end("ok");
}
}, function (e) {
// if any api call fails, just send an error back immediately
res.end("error");
});
}
});
There are a couple of ways to do this, all idiomatic and down to matter of personal taste.
There is a library called async that provides help in these kind of operations. It specifically contains methods for going through a collection and doing something asynchronous with each of the items. Check out forEachOf, forEachOfSeries, forEachOfLimit for details.
You can achieve this using Promises. Make your API return Promises instead of accepting callbacks. Then create an array of Promises, one for each call and then then wait for all them with Promise.all.
ES6 specification now includes Promises so that is an indication what will be the favorite way in the future.