I'm working on a project where inside a loop I need to make multiple JSON calls. As soon as I exit that loop I need to work with the results of all the calls I made. I'm having a hard time understanding how to make these calls in such a way that my order of operation works out. My code to work with the results always executes before the calls to the service have completed. I created a jsfiddle to demonstrate and am including the code here.
http://jsfiddle.net/VEkrf/3/
var sourceData = { "fooIndex": "foo",
"barIndex": "bar"
}
var destinationData = {};
for (var sourceIndex in sourceData) {
$.getJSON('http://echo.jsontest.com/' + sourceIndex + '/' + sourceData[sourceIndex] + '?callback=?', null, function (result) {
for (var resultIndex in result) {
alert("Adding " + resultIndex + " : " + result[resultIndex]);
destinationData[resultIndex] = result[resultIndex];
}
});
}
if (Object.keys(destinationData).length == 0) {
alert("Destination not yet populated");
}
else {
alert("Eureka! You did it!");
}
This looks like a job for jQuery Deferred Object, and my sidekick $.when!
Pass all the $.getJSON calls to $.when, and when they are all done, I'll will call a function with all the results.
Check this out:
var sourceData = {
"fooIndex": "foo",
"barIndex": "bar"
};
var destinationData = {};
// Array of AJAX calls
var AJAX = [];
for (var sourceIndex in sourceData) {
AJAX.push($.getJSON('http://echo.jsontest.com/' + sourceIndex + '/' + sourceData[sourceIndex] + '?callback=?'));
}
// Apply is needed to pass each element as a parameter
$.when.apply($, AJAX).done(function(){
// This function will be called when all the AJAX calls are done
// The arguments of the functin are the responses from each request
for(var i = 0, len = AJAX.length; i < len; i++){
var result = arguments[i][0];
//arguments: [resultObj, 'success', jqXHR]
for (var resultIndex in result) {
alert("Adding " + resultIndex + " : " + result[resultIndex]);
destinationData[resultIndex] = result[resultIndex];
}
}
alert("Eureka! You did it!");
});
NOTE: Since this is asynchronous, destinationData won't be available until the callback is triggered. Put any code that uses that inside the .done() callback.
Since you are using jQuery already I suggest exploring the queue functions. You can queue the ajax calls and then in the success handlers call the de-queue or next function. this way they go in succession. The last item you add to the queue is your function that handles the returned data.
var sourceData = {
"fooIndex": "foo",
"barIndex": "bar"
};
var destinationData = {};
$(function () {
console.debug('ready');
for (var sourceIndex in sourceData) {
console.debug('for Loop');
$(document).queue('ajax', function (next) {
$.getJSON('http://echo.jsontest.com/' + sourceIndex + '/' + sourceData[sourceIndex] + '?callback=?', null, function (result) {
for (var resultIndex in result) {
alert("Adding " + resultIndex + " : " + result[resultIndex]);
destinationData[resultIndex] = result[resultIndex];
next();
}
});
});
}
$(document).queue('ajax', function (next) {
alert("Eureka! You did it!");
});
$(document).dequeue('ajax');
});
I do this all the time for 'synchronus' ajax.
here is an example of what i am talking about
Related
I want to learn such new JavaScript features as fetch() and arrow functions. To this end, I selected a function from a recent app, and attempted to replace older features with new. Very little success. Here's my original function:
function popNames(arNumbers,ctrlName) {
var arSortedList = [];
var strNameList = "";
$.getJSON("NAME.json").done(function(zdata) {
$.each(arNumbers, function(i, ydata) {
$.each(zdata.NAME, function(k,v) {
if(v.idName == ydata) {// important: === did NOT work
if(ctrlName) arSortedList.push(v.last + ", " + v.first + ";" + v.idName);
else arSortedList.push(v.last + ", " + v.first);
}
}); // each element of NAME.json
}); // each idName value in the array passed
if(ctrlName) {
setOptions(arSortedList, ctrlName);
} else {
strNameList = arSortedList.join();
}
}); // getJSON NAME
}
I was successful using this line:
fetch("NAME.json").then(zdata => zdata.json())
but nothing I did after that worked. I'd appreciate seeing an example from which I can learn.
function popNames(arNumbers,ctrlName) {
let arSortedList = [];
let strNameList = "";
fetch("NAME.json").then(zdata => zdata.json())
.then(zdata => {
for(const ydata of arNumbers) {
for(const v of zdata.NAME) {
if(v.idName == ydata) { // important: === did NOT work
if(ctrlName) arSortedList.push(v.last + ", " + v.first + ";" + v.idName);
else arSortedList.push(v.last + ", " + v.first);
}
}
}
if(ctrlName) {
setOptions(arSortedList, ctrlName);
} else {
strNameList = arSortedList.join();
}
}); // getJSON NAME
}
I was researching why I couldn't next two Array.forEach statements, and discovered a new iterable construction (for...of).
I have a client-side web-application that takes a csv-file, parses it into various data types, searches for something specific, and displays a table with the answer on the screen. The search function returning a null string. This occurs because its search parameter, returned by a callback function and put into lib, returns null.
I'm fairly certain this is a callback issue, but I've messed around with the order so much I'm not sure what goes where anymore in my html...A second set of eyes would be appreciated.
The desired series of events
fileToArray() gives us an array
search() looks in the array for its specified item and returns a csv-format string containing what it found
displayTable takes that csv-format string and outputs it to the desired location
The Code
// jQuery call to fetch the client-side csv file - this works when called by itself.
const fileToArray = () => {
console.log("fileToArray started.");
$.get({
url: CSV_LOCATION,
dataType: "text",
success: function (result) {
console.log("splitting result by newline...");
let csvLines = result.split("\n");
console.log("split successful. generating array into retval ...");
let retval = [];
for (let i = 0; i < csvLines.length; i++) {
// [0][0] is number [0][1] is class, [0][2] is unit, [0][3] is lesson
retval[i] = csvLines[i].split(",");
}
console.log("success! Returning retval.");
return retval;
// callback(result);
// return result;
},
failure: function (xhr, status, error) {
console.log("ERROR: fileToString(): " + xhr + " ||| " + status + " ||| " + error);
alert("ERROR: fileToString(): " + xhr + " ||| " + status + " ||| " + error);
}
})
};
// PRECONDITION: form is #search-params in index.js
// > lib is the result of fileToArray()
// POSTCONDITION: result is a csv-format string to be passed to displayTable() in index.js
const search = (form, callback) => {
console.log("search called...");
// vvvvv The probable root of the problem vvvvv //
let lib = callback;
console.log(lib.length + " is lib's length.");
let result = "";
console.log("search nested for loop called...");
for (let i = 0; i < lib.length; i++) {
// check class
console.log("checking class " + form.class.value + "...");
if (lib[i][1] === form.class.value) {
// check unit
console.log("checking unit " + form.unit.value + "...");
if (Number(lib[i][2]) === Number(form.unit.value)) {
console.log("adding to result...");
result += lib[i] + "\n";
}
}
}
console.log("search success! result: " + result.length + " characters");
console.log(result);
return result;
};
<!-- I'm almost 100% certain I've messed up the callback in this button,
but I still don't quite understand how... I've played with
displayTable(fileToArray(search(...))), but I don't quite know how it should go -->
<button class="btn btn-primary"
onclick="displayTable(search(document.getElementById('search-params'), fileToArray), $('#card-display'))">
Submit
</button>
What I've tried
I have looked to the following sites for inspiration (none have helped):
JavaScript is Sexy
JavaScript: Passing parameters to a callback function
JavaScript Callback Functions
Passing arguments to callback functions
In Summary
It's painfully obvious I still don't understand callbacks fully. Any help would be appreciated.
You could use async / await
const displayTable = async () => {
let arrayFromFile = await fileToArray(); // fileToArray executes and assigns the returned value when it completes
let searchedData = search(form, arrayFromFile);
// Display the table
};
Thanks to #kapantzak for the inspiration!! Turns out, I was using callbacks horribly bass-ackwards. According to this, the old-school async style is something akin to
doSomething(function(result) {
doSomethingElse(result, function(newResult) {
doThirdThing(newResult, function(finalResult) {
console.log('Got the final result: ' + finalResult);
}, failureCallback);
}, failureCallback);
}, failureCallback);
So, the relevant code now looks like this:
const fileToArray = (callback) => {
// console.log("fileToArray started.");
$.get({
url: CSV_LOCATION,
dataType: "text",
success: function (result) {
let csvLines = result.split("\n");
let retVal = [];
for (let i = 0; i < csvLines.length; i++) {
// [0][0] is number [0][1] is class, [0][2] is unit, [0][3] is lesson
retVal[i] = csvLines[i].split(",");
}
callback(retVal);
},
failure: function (xhr, status, error) {
console.log("ERROR: fileToString(): " + xhr + " ||| " + status + " ||| " + error);
alert("ERROR: fileToString(): " + xhr + " ||| " + status + " ||| " + error);
}
})
};
// =======
const search = (form, lib, callback) => {
let result = "";
let formClass = form.class.value.toLowerCase();
let formUnit = form.unit.value.toLowerCase();
let formLesson = form.lesson.value.toLowerCase();
for (let i = 0; i < lib.length; i++) {
// check class
if (lib[i][1].toLowerCase() === formClass) {
// check unit
if (Number(lib[i][2].toLowerCase()) === Number(formUnit)) {
result += lib[i] + "\n";
}
}
}
console.log(result);
callback(result);
};
<button class="btn btn-primary"
onclick="fileToArray(function(result) {
search(document.getElementById('search-params'), result, function(newResult) {
displayTable(newResult, $('#card-display'));
});
});">
Submit
</button>
This righted the wrongs and caused my search and display to function properly.
This question already has answers here:
How to wait until jQuery ajax request finishes in a loop?
(5 answers)
How do I return the response from an asynchronous call?
(41 answers)
Closed 7 years ago.
I am attempting to populate an array and use it later. I am getting "undefined" result when I try accessing objects at indexes.
$(document).ready(function() {
var streamers = ["freecodecamp", "GeoffStorbeck", "terakilobyte"];
var cb = '?client_id=5j0r5b7qb7kro03fvka3o8kbq262wwm&callback=?';
var url = 'https://api.twitch.tv/kraken/';
var result = {};
streamers.forEach(function(stream)
{
$.getJSON(url + 'streams/' + stream + cb).success(function(data)
{
var streaming = (data.stream === null) ? false : true;
result.push(stream + " - " + streaming);
});
});
alert(result[0]);
alert(result[1]);
alert(result[2]);
});
What you need is a callback, as your getting something for the server mostly happens in asynchronous processes, which mean that the code continues executing and only adds something to the array when something is returned. You want the script to only alert things when it completed a task, which is why we call it a call back, as it will call the passed function back (aka when it's done).
$(document).ready(function() {
var streamers = ["freecodecamp", "GeoffStorbeck", "terakilobyte"];
var cb = '?client_id=5j0r5b7qb7kro03fvka3o8kbq262wwm&callback=?';
var url = 'https://api.twitch.tv/kraken/';
// This should be initialised as an array, not an object!
var result = [];
function callback(){
// I add this line to reduce the amount of alerts
if(result.length !== 3) return;
alert(result[0]);
alert(result[1]);
alert(result[2]);
}
streamers.forEach(function(stream){
$.getJSON(url + 'streams/' + stream + cb).success(function(data){
var streaming = (data.stream === null) ? false : true;
result.push(stream + " - " + streaming);
callback();
});
});
});
You are accessing result before the $.getJSON callbacks have been executed. Many questions like this have been answered already, see Why is my variable unaltered after I modify it inside of a function? - Asynchronous code reference for an explanation of the problem.
You should make use of the fact that all Ajax methods return promises/deferred objects and use $.when to wait for all of them to complete:
var deferreds = streamers.map(function(stream) {
return $.getJSON(url + 'streams/' + stream + cb).then(function(data) {
var streaming = (data.stream === null) ? false : true;
return stream + " - " + streaming;
});
});
$.when.apply(null, deferreds).then(function(result) {
console.log(result);
});
$.getJSON is asynchronous.
Your alerts are running before you have data in the array.
To view the data when it's available, move the alerts (or better yet, console.logs) up into the success callback:
$(document).ready(function() {
var streamers = ["freecodecamp", "GeoffStorbeck", "terakilobyte"];
var cb = '?client_id=5j0r5b7qb7kro03fvka3o8kbq262wwm&callback=?';
var url = 'https://api.twitch.tv/kraken/';
var result = {};
streamers.forEach(function(stream) {
$.getJSON(url + 'streams/' + stream + cb).success(function(data) {
var streaming = (data.stream === null) ? false : true;
result.push(stream + " - " + streaming);
console.log(result);
});
});
});
Moving from looking at the results to using the results, you'll want to break things up a bit:
$(document).ready(function() {
var streamers = ["freecodecamp", "GeoffStorbeck", "terakilobyte"];
var cb = '?client_id=5j0r5b7qb7kro03fvka3o8kbq262wwm&callback=?';
var url = 'https://api.twitch.tv/kraken/';
var result = {};
var getStreams = streams.map(function (stream) {
return $.getJSON(url + 'streams/' + stream + cb).success(function(data) {
var streaming = (data.stream === null) ? false : true;
result.push(stream + " - " + streaming);
console.log(result);
});
});
var onResultsSuccess = function (results) {
console.log("I have all my streams, let's take a look at them:", results);
};
var onResultsFail = function () {
console.log("Something's up!", arguments);
};
$.when(getStreams).then(onResultsSuccess, onResultsFail);
});
Untested so assume it's pseudo!
Not only should you defer the alert to after the calls, you should not loop Ajax externally..
Here is what I would suggest
function getStream() {
if (result.length >= streamers.length) return;
var stream = streamers[result.length];
$.getJSON(url + 'streams/' + stream + cb).success(function(data){
var streaming = (data.stream === null) ? false : true;
result.push(stream + " - " + streaming);
getStream();
});
}
var streamers = ["freecodecamp", "GeoffStorbeck", "terakilobyte"];
var cb = '?client_id=5j0r5b7qb7kro03fvka3o8kbq262wwm&callback=?';
var url = 'https://api.twitch.tv/kraken/';
// This should be initialised as an array, not an object!
var result = [];
$(function() {
getStream();
});
I have list which is filled in for cycle where I calling assync function by thos way:
In For cycle I'm calling
row.SUCCES_RATE_SINCE = $scope.computeSuccessRateSinceStart(row);
Called function
// Calculate percentage of a whole from since
$scope.computeSuccessRateSinceStart = function(row) {
db = window.sqlitePlugin.openDatabase({name:"callplanner"});
// GET APPT COUNT
db.transaction(function(tx) {
tx.executeSql(sqlQuery, [], function(tx,results){
// init empty array for results
for (var i=0; i < results.rows.length; i++){
row = results.rows.item(i);
//Udpate date for writeout
//row.DATE = moment(row.DATE).format('ddd DD.M');
console.log("row APPT count is " + JSON.stringify(row));
apptCnt = row.APPT_CNT;
convCnt = row.CONVERS_CNT;
dailySuccessRateSince = apptCnt / convCnt * 100;
console.log("Success rate since is " +dailySuccessRateSince);
// THIS IS NOT WORKING
return Math.round(dailySuccessRateSince);
}
});
},function (e) {
console.log("ERROR: " + e.message);
$ionicLoading.show({
template: $translate.instant('ERROR_DATABASE'),
duration:1000
});
});
};
Problem is that computed value is always returned null (return function is executed before value is available in scope).
I'm quite new in Angular but i found that this issue could be solved using promises. Could somebody give me the example how to return value properly?
Many thanks for any help.
EDIT:
Called method is now triggered, but i cannot pass returned value into variable like this:
var test = $scope.computeSuccessRateSinceStart(row).then(function(result){
//ALERT WITH VALUE WORKS FINE
alert("Result " + result);
return result;
});
// THIS GIVES ME EMPTY ARRAY {}
alert("Result " + JSON.stringify(test));
Why don't you just make your method such that it always returns a promise, and then extract the result from the promise?
$scope.computeSuccessRateSinceStart = function(row) {
var deferred = $q.defer();
db = window.sqlitePlugin.openDatabase({name:"callplanner"});
// GET APPT COUNT
db.transaction(function(tx) {
tx.executeSql(sqlQuery, [], function(tx,results){
// init empty array for results
for (var i=0; i < results.rows.length; i++){
row = results.rows.item(i);
//Udpate date for writeout
//row.DATE = moment(row.DATE).format('ddd DD.M');
console.log("row APPT count is " + JSON.stringify(row));
apptCnt = row.APPT_CNT;
convCnt = row.CONVERS_CNT;
dailySuccessRateSince = apptCnt / convCnt * 100;
console.log("Success rate since is " +dailySuccessRateSince);
// THIS IS NOW WORKING:
deferred.resolve(Math.round(dailySuccessRateSince));
}
});
}, function(e) {
console.log("ERROR: " + e.message);
deferred.reject(e);
});
return deferred.promise;
};
Usage:
$scope.computeSuccessRateSinceStart(row).then(function(result){
// THIS GIVES THE VALUE:
alert("Result " + JSON.stringify(test));
return result;
}, function(e)
$ionicLoading.show({
template: $translate.instant('ERROR_DATABASE'),
duration:1000
});
});
I have some trouble with asynchronous JavaScript. I call a function within a jQuery AJAX call, and in this function there are probably other asynchronous methods calls. I stuck in there on the moment.
Here I have the code snippet which is called by the jQuery AJAX function: Here I build dynamically a JSON object.
function getJSONObjektList() {
//MainJSON
var jsonObjekt = {};
jsonObjekt.ObjektId = [];
jsonObjekt.Selected = [];
doc = XYZ.GetCurrentDocument();
//probably also an asynchrounous call
doc.GetAllObjects(function (objects) {
for (var i = 0; i < objects.length; i++) {
var obj = objects[i];
var id = obj.id;
var caption = obj.caption;
var type = obj.type;
var my = obj.my;
console.log("[obj:" + obj + " id:" + id + " caption:" + caption + " type:" + type + " my: " + my + "]");
//liste alle verfuegbaren Objekte auf
jsonObjekt.ObjektId.push(id);
if (type === "Statusbox") {
doc.GetObject(id, function () {
var statusboxInhalt = this.Data.Rows;
//inner JSON object
var utilJSONObjekt;
for (var j = 0; j < statusboxInhalt.length; j++) {
// make sure to re-initialize so we don't update the same reference
utilJSONObjekt = {};
utilJSONObjekt.SelectedObjektId;
utilJSONObjekt.SelectedObjektWerte = [];
var inhalt = statusboxInhalt[j];
console.log("Name: " + inhalt[0].text + " Wert: " + inhalt[2].text);
utilJSONObjekt.SelectedObjektId = inhalt[0].text;
var valAr = inhalt[2].text.split(",");
for (var k = 0; k < valAr.length; k++) {
utilJSONObjekt.SelectedObjektWerte.push($.trim(valAr[k]));
}
jsonObjekt.Selected.push(utilJSONObjekt);
//**till here is the jsonObject not null or empty, there are some values in there**
}
});
}
}
});
//**but on the return statment is the jsonObjekt empty**
return jsonObjekt;
}
Have someone some tips how can I solve my problem, or how can I make JavaScript best asynchronously working.
Yeah, simply use callback pattern:
function getJSONObjektList(callback) { // <--- note callback
// asynchronous code starts here...
for (var k = 0; k < valAr.length; k++) {
utilJSONObjekt.SelectedObjektWerte.push($.trim(valAr[k]));
}
jsonObjekt.Selected.push(utilJSONObjekt);
callback(jsonObjekt);
// ...and ends here
}
and in your code you can use it like that:
getJSONObjektList(function(jsonObjekt) {
console.log(jsonObjekt);
// other code
});
EDIT Here's an example of two solutions to the same problem. One with callback pattern and one without it:
no callback
var add = function(x,y) {
return x+y;
};
var x = 1;
var sum = add(x, 1);
var sum2 = add(sum, 1);
console.log(sum2);
callback
var add = function(x,y,callback) {
callback(x+y);
}
var x = 1;
add(x, 1, function(sum) {
add(sum, 1, function(sum2) {
console.log(sum2);
});
});
Obviously the callback pattern is more messy, but if you are dealing with asynchronous operations then you absolutely need it, for example:
var add = function(x, y, callback) {
// add numbers after 2 seconds
setTimeout(function() {
callback(x+y);
}, 2000);
}
add(1, 2, function(sum) {
console.log(sum);
// will produce 3 after 2 seconds
// you can continue your code here
});
The idea is to pass a function which will be called after the asynchronous operation is done.