We Keep Coding

Why is javascript callback function not executing?

Can someone explain why callback function after loadData(symbol) is not being called? I have this function:
function plotChart(symbol) {
alert("symbol: " + symbol);
var data = loadData(symbol, function(){
console.log("data: ",data);
});
}
I'm expecting log.console to execute after loadData completes, but nothing gets output.
In case it matters, here is the loadData function.
function loadData(symbol) {
count = 0;
quotes = [];
$.getJSON("http://localhost:8080/springboot-crud-rest/api/v1/quotes-between?symbol=IBM&startDate=2020-01-01&endDate=2020-09-30", function(data) {
data.forEach(function(item){
var quote = {};
quote.date = item.id.date.substring(0,10);
quote.open = item.open;
quote.high = item.high;
quote.low = item.low;
quote.close = item.close;
quote.volume = item.volume;
quotes.push(quote); //put quote in array
});
console.log("quotes: ",quotes);
return quotes;
});
}
Here the console.log successfully prints out the quotes correctly.
EDIT:
Per #Aluan, I changed the code to look like this:
function plotChart(symbol) {
loadData(symbol).then(function(data) {
console.log("data: ", data);
});
}
function loadData(symbol) {
quotes = [];
$.getJSON("http://localhost:8080/springboot-crud-rest/api/v1/quotes-between?symbol=" +symbol +"&startDate=2020-01-01&endDate=2020-09-30")
.then(function (data) {
const quotes = data.map(function(item) {
return {
date: item.id.date.substring(0,10),
open: item.open,
high: item.high,
low : item.low,
close: item.close,
volume: item.volume
};
});
console.log("quotes: ",quotes);
return quotes;
});
}
But now I'm getting error:
Uncaught TypeError: Cannot read property 'then' of undefined
at plotChart (moneymachine.html:120)
at HTMLTableRowElement.
Line 120 is loadData(symbol).then(function(data) {

The definition of loadData is essential to understanding the reason.
Given
function loadData(symbol) {
count = 0;
quotes = [];
$.getJSON("http://localhost:8080/springboot-crud-rest/api/v1/quotes-between?symbol=IBM&startDate=2020-01-01&endDate=2020-09-30", function (data) {
data.forEach(function (item) {
var quote = {};
quote.date = item.id.date.substring(0, 10);
quote.open = item.open;
quote.high = item.high;
quote.low = item.low;
quote.close = item.close;
quote.volume = item.volume;
quotes.push(quote); //put quote in array
});
console.log("quotes: ", quotes);
return quotes;
});
}
We can see that it defines one parameter, symbol. You may pass additional arguments when calling it, but it clearly does not use them.
When you write
var data = loadData(symbol, function () {
console.log("data: ", data);
});
The second argument is simply ignored.
Here's an example of loadData that would accept and make use of a second argument that's a callback.
function loadData(symbol, callback) {
count = 0;
quotes = [];
$.getJSON("http://localhost:8080/springboot-crud-rest/api/v1/quotes-between?symbol=IBM&startDate=2020-01-01&endDate=2020-09-30", function(data) {
data.forEach(function(item){
var quote = {};
quote.date = item.id.date.substring(0, 10);
quote.open = item.open;
quote.high = item.high;
quote.low = item.low;
quote.close = item.close;
quote.volume = item.volume;
quotes.push(quote); //put quote in array
});
callback(data) // here
console.log("quotes: ", quotes);
});
}
However, this definition of loadData is suboptimal at best. It should make use of the thenable return by jQuery's $.getJson, to make the code clearer.
function loadData(symbol) {
return $.getJSON("http://localhost:8080/springboot-crud-rest/api/v1/quotes-between?symbol=IBM&startDate=2020-01-01&endDate=2020-09-30")
.then(function (data) {
const quotes = data.map(function (item) {
return {
date: item.id.date.substring(0, 10),
...item
};
});
console.log("quotes: ", quotes);
return quotes;
});
}
Consumed as
loadData('something').then(function (data) {
console.log("data: ", data);
});

Unable to return result from promise

I am trying to read some data from 2 different tables and parse a CSV file before rendering an ejs file.
I can get the data from both tables and from the CSV file but I seem to be unable to return the result.
Pretty sure this is a problem with the way I handle async execution but I fail to see what I am doing wrong.
I've spent the last 2 days reading about this (including the threads around here) and browsing but somehow the answer still escapes me.
First file - usercms.js
app.get('/userscms', function(req, res)
{
existingUsers.getExistingUsers()
.then(function(appUsers)
{
//global users array
//I can display these in my ejs file
globalAppUsers = appUsers;
})
.then(existingUsersAttributesQlik.getExistingUsersAttributesQlik())
.then(function(usersQlikAttributes)
{
//global user attributes array
//undefined data
globalUsersQlikAttributes = usersQlikAttributes;
})
.then(existingSuppliers.parseSuppliersCSV())
.then(function(supplierData)
{
//the result I am expecting
//this prints undefined
console.log(supplierData);
}).then(function()
{
res.render('userscms.ejs',
{
users: globalAppUsers,
attributes: globalUsersQlikAttributes
});
});
});
Second function - getxistingUsers.js (identical to the getExistingUsersAttributesQlik, except for the query)
var userData = [];
var appUsers = [];
(function (exports)
{
exports.getExistingUsers = function ()
{
return promisemysql.createConnection(dbconfig.development).then(function(conn)
{
var result = conn.query("SELECT id, username, firstName, lastName, email, phone, lastLogin, isAdmin, isValid, isPhoneValid, accountCreationDateTime FROM Users");
conn.end();
return result;
}).then(function(rows)
{
return rows;
}).then(function(rows)
{
if (rows.length)
{
userData = [];
appUsers = [];
rows.forEach(function (elem)
{
userData.push(_.toArray(elem));
});
for (i = 0; i < userData.length; i++)
{
var appUser = new appUserModel.AppUser(
userData[i][0],
userData[i][1],
userData[i][2],
userData[i][3],
userData[i][4],
userData[i][5],
userData[i][6],
userData[i][7],
userData[i][8],
userData[i][9],
userData[i][10]);
appUsers.push(_.toArray(appUser));
}
return appUsers;
}
else
{
console.log("NOPE");
return null;
}
}).then(function(appUsers)
{
console.log(appUsers);
return appUsers;
});
};
})(typeof exports === 'undefined' ? this['getExistingUsers'] = {} : exports);
Third file - parseSuppliersCSV.js
var supplierData = [];
var suppliersData = [];
var csvCount = 0;
(function (exports)
{
exports.parseSuppliersCSV = function ()
{
return new Promise(function(resolve, reject)
{
var fileStream = fs.createReadStream("myCSV.csv");
var parser = fastCsv();
csvCount = 0;
supplierData = [];
suppliersData = [];
fileStream
.on("readable", function ()
{
var data;
while ((data = fileStream.read()) !== null)
{
parser.write(data);
}
})
.on("end", function ()
{
parser.end();
});
parser
.on("readable", function ()
{
var data;
while ((data = parser.read()) !== null)
{
if(csvCount >= 1)
{
csvCount++;
var arrayOfStrings = data[0].split(';');
var supplier = new supplierModel.Supplier(arrayOfStrings[0],arrayOfStrings[1]);
suppliersData.push(_.toArray(supplier));
}
else
{
csvCount++;
}
}
})
.on("end", function ()
{
console.log("done");
//all OK here
console.log(suppliersData);
//this doesn't seem to return anything
return suppliersData;
});
});
};
})(typeof exports === 'undefined' ? this['parseSuppliersCSV'] = {} : exports);
Any ideas what I am doing wrong? Am I approaching this the wrong way?

I'll take a guess here and assume the promise you created should resolve to something...instead of returning a value.
.on("end", function ()
{
console.log("done");
//all OK here
console.log(suppliersData);
//this doesn't seem to return anything
return resolve(suppliersData);
});

How to post inside a loop with AngularJS 1.4.8

I have found other answers to similar questions of mine, but none of them worked for me.
I'm trying to create a cards game. Here I'm trying to shuffle through the cards and give each player 5 random Money cards ( $scope.MoneyCards ). Instead, this code gives all the 15 cards to the last player on the loop.
The results with ( Angular 1.0.8 ) is exactly how I want it. But when I'm using any later version this doesn't work. I'm working on migrating to 1.4.8 .
This is the code I'm using:
$scope.StartGame = function() {
$http.get('/api/MoneyCards')
.success(function(data) {
$scope.MoneyCards = data;
console.log(data);
// Loop through players
player = 1;
while(player < 4) {
// Loop through money cards to give each player 5 cards
i=0;
while(i < 5) {
// Shuffle
var Mfloor = Math.floor(Math.random()*$scope.MoneyCards.length);
$scope.randomCard = $scope.MoneyCards.splice(Mfloor, 1 );
// Create the card in the Deck table and attach it to a player
$scope.createDecks($scope.randomCard[0],player,0);
i++;
}
player++;
}
})
.error(function(data) {
console.log('Error: ' + data);
});
};
This is the createDecks function
$scope.createDecks = function(card, player, type) {
$scope.formData.player = player;
$scope.formData.type = type;
$scope.formData.card = card;
$http.post('/api/Decks', $scope.formData)
.success(function(data) {
$scope.formData = {};
console.log(data);
})
.error(function(data) {
console.log('Error: ' + data);
});
};
I'll try to adopt this to JSFiddle.
Code provided by georgeawg using $q and still not working
$scope.StartGame = function() {
$http.get('/api/MoneyCards')
.success(function(data) {
$scope.MoneyCards = data;
console.log(data);
var player = 0;
while(player < 3){
var i = 0;
var qPromise = $q.when(0);
while(i < 5) {
// Shuffle
var Mfloor = Math.floor(Math.random()*$scope.MoneyCards.length);
var randomCard = $scope.MoneyCards.splice(Mfloor, 1 );
// Create the card in the Deck table and attach it to a player
qPromise = qPromise.then( function (response) {
return $q.all([
response,
$scope.createDecksPromise(randomCard[0],player,0)
]);
});
i++;
};
player += 1;
};
qPromise.then ( function(response) {
//do whatever
console.log(response);
}) .catch ( function (error) {
throw error;
});
})
.error(function(data) {
console.log('Error: ' + data);
});
};

First yourcreateDecks function should return promises.
$scope.createDecksPromise = function(card, player, type) {
var formData = {};
formData.player = player;
formData.type = type;
formData.card = card;
return $http.post('/api/Decks', formData);
};
Your iterative loop should then chain those promises.
var i = 0;
var qPromise = $q.when([]);
while(i < 5) {
// Shuffle
var Mfloor = Math.floor(Math.random()*$scope.MoneyCards.length);
var randomCard = $scope.MoneyCards.splice(Mfloor, 1 );
// Create the card in the Deck table and attach it to a player
// Add closure for randomCard and player
(function (randomCard, player) {
qPromise = qPromise.then( function (response) {
response.push(
$scope.createDecksPromise(randomCard[0],player,0)
);
return $q.all(response);
});
})(randomCard, player);
i++;
};
qPromise.then ( function(response) {
//do whatever
}) .catch ( function (error) {
throw error;
});
Remember that when chaining promises you should always return something to the .then method.
Also be aware that the .then method has a different response structure than the .success method.
The AngularJS team has come to their senses and deprecated .success. We should all be using the .then method now. To learn more about the deprecation (or should I say failure) of .success and .error, see the latest AngularJS $http API Docs.
To learn more about $q.when, look at the AngularJS $q Service API Docs.

I have finally found the answer, here is the code:
$scope.StartGame = function() {
$http.get('/api/MoneyCards')
.success(function(data) {
$scope.MoneyCards = data;
console.log(data);
var qPromise = [];
var player = 1;
while(player < 4){
var i = 0;
while(i < 5) {
qPromise.push([
Mfloor = Math.floor(Math.random()*$scope.MoneyCards.length),
randomCard = $scope.MoneyCards.splice(Mfloor, 1 ),
$scope.createDecksPromise(randomCard[0],player,0)
]);
i++;
};
player += 1;
};
return $q.all(qPromise);
})
.error(function(data) {
console.log('Error: ' + data);
});
};
Thanks to georgeawg, the $http.post $scope.createDeckPromise() should return promises:
$scope.createDecksPromise = function(card, player, type) {
var formData = {};
formData.player = player;
formData.type = type;
formData.card = card;
return $http.post('/api/Decks', formData);
};
For whoever is having the same issue. This is the solution without my code:
$scope.RunCode(){
var Promises = [];
var i = 0;
while (i < 5){
Promises.push($http.post('/api/whatever', formData));
// to add multiple functions to the promise use [], example: Promises.push([doThing1, doThing2]);
i++;
};
return $q.all(Promises);
}

Code 141 success/error message not called on parse cloud code nested query

I keep receiving a code 141 error success/error was not called. I am running another function getCinemasInLocation which returns a JSON like: {result: [result1, result2]}. I want to iterate over this array and run a query each time the loop runs and all the results to an array. That is, the results of all oteration will be in an array. Am I doing it right?
//This function uses getCinemasInLocation to retrieve the movie objects that are showing in the cinemas
Parse.Cloud.define("getMovieIdsInCinemas", function(request, response) {
var cinemasInLocaton = [];
var theLocation = request.params.theLocation;
cinemasInLocation = Parse.Cloud.run("getCinemasInLocation", {theLocation: theLocation});
for (i = 0; i < cinemasInLocation.length; i++){
var query = new Parse.Query("showing");
var movieIds = [];
query.equalTo("cinema", {
__type: "Pointer",
className: "Cinema",
objectId: cinemasInLocation[i]
});
query.find({
success: function(results) {
for (var i = 0; i < results.length; i++) {
movieIds.push(results[i].get("movie"));
}
response.success(movieIds);
},
error: function() {
response.error("movie lookup failed 2");
}
});
}
});
This is the getCinemasInLocation that does not work
function getCinemasInLocation(theLocation) {
// some code
//var result = ["xiUXXYFhAl","Yanh9iDykk"];
//return result;
var result = new Parse.Promise();
var query = new Parse.Query("Cinema");
query.equalTo("Location", theLocation);
query.find({
success: function(objects) {
var cinemas = [];
for (var i = 0; i < objects.length; i++) {
var cinema = objects[i];
cinemas.push(cinema.id);
}
result.resolve(cinemas);
},
error: function(error) {
result.reject(error);
}
});
return result;
}

Parse.Cloud.run doesn't return an array. It returns a Promise. So, create a normal javascript function in the same file: getCinemasInLocation()
As #Delhi said, you can only call response.success() or response.error() once. So, don't put them in a loop.
Use Promises on parallel. So, let's use the loop of Underscore instead of the normal FOR loop. You can start multiple operations at once, and use Parse.Promise.when to create a new promise that will be resolved when all of its input promises is resolved. You can read more about this in the documentation: https://www.parse.com/docs/js_guide#promises-parallel
var _ = require('underscore');
function getCinemasInLocation(theLocation) {
// some code
var result = [id1, id2];
return result;
}
// This function returns the array of movieIds of a cinema
function getMovieIdsInCinema(cinemaId) {
var result = new Parse.Promise();
var query = new Parse.Query("showing");
query.equalTo("cinema", {
__type: "Pointer",
className: "Cinema",
objectId: cinemaId
});
query.find({
success: function(objects) {
var movieIds = [];
for (var i = 0; i < objects.length; i++) {
var movie = objects[i].get("movie");
movieIds.push(movie.id);
}
result.resolve(movieIds);
},
error: function(error) {
result.reject(error);
}
});
return result;
}
Parse.Cloud.define("getMovieIdsInCinemas", function(request, response) {
var cinemasInLocation = [];
var theLocation = request.params.theLocation;
cinemasInLocation = getCinemasInLocation(theLocation);
var promises = [];
_.each(cinemasInLocation, function(cinemaId) {
promises.push(getMovieIdsInCinema(cinemaId));
});
Parse.Promise.when(promises).then(
function() {
var result = [];
_.each(arguments, function(object) {
result.push(object); // each object is an array of movieIds
});
response.success(result); // return array of arrays
},
function(error) {
response.error(error);
}
);
});

How to handle each response in successCallBack of promises in case of dynamic passage of promises to .when()

Here are the cloud functions namely 'batchReq1' and batchPromises.
In any case, if I know the exact number of promises pushed (Consider the size of results to be '2' in function batchPromises(results)) and executed through when(), I can handle the success response by passing that number of result parameters (In the below example request1, request2) in successCallBack of .then().
If I have to process the number of promises pushed to .when() dynamically, then, how can we handle this in SuccessCallBack? Unlike earlier scenario, we can't expect fixed number of results in the then method (batchPromises(results).then(function (result1, result2) {....)
batchReq1
Parse.Cloud.define("batchReq1", function (request, response) {
var results = request.params.imageArray;
batchPromises(results).then(function (result1, result2) {
console.log("Final Result:: Inside Success");
console.log("Final Result:: Inside Success result 1::::"+result1);
console.log("Final Result:: Inside Success result 2::::"+result2);
response.success();
}
// batchPromises(results).then(function (arraySuccess) {
//
// console.log("Final Result:: Inside Success");
// console.log("Final Result:: Inside Success:: Length:: "+arraySuccess.length);
// //Fetch all responses from promises and display
// var _ = require('underscore.js');
// _.each(arraySuccess, function (result) {
//
// console.log("Final Result:: " + result)
//
// });
//
//
// response.success();
//
// }
, function (error) {
console.log("Final Result:: Inside Error");
response.error(error);
});
});
batchPromises
function batchPromises(results) {
var promise = Parse.Promise.as();
var promises = [];
var increment = 0;
var isFromParallelExecution = false;
var _ = require('underscore.js');
_.each(results, function (result) {
var tempPromise = Parse.Promise.as("Promise Resolved ");
promises.push(tempPromise);
}
promise = promise.then(function () {
return Parse.Promise.when(promises);
});
}
increment++;
});
return promise;
}

this is how i handle this...
Parse.Cloud.define("xxx", function(request, response)
{
var channels = ["channel1", "channel2", "channel3", "channel4", "channel5"];
var queries = new Array();
for (var i = 0; i < channels.length; i++)
{
var query = new Parse.Query(channels[i]);
queries.push(query.find());
}
Parse.Promise.when(queries).then(function()
{
var msg = "";
for (var j = 0; j < arguments.length; j++)
{
for (var k = 0; k < arguments[j].length; k++)
{
var object = arguments[j][k];
msg = msg + " " + object.get('somefield');
}
}
response.success(msg);
});
});

Either you just use the arguments object to loop over the results, or you build your arraySuccess without when - it doesn't make much sense here anyway as you batch the requests (executing them sequentially), instead of executing them in parallel:
function batchPromises(tasks) {
var _ = require('underscore.js');
_.reduce(tasks, function (promise, task) {
return promise.then(function(resultArr) {
var tempPromise = Parse.Promise.as("Promise Resolved for "+taks);
return tempPromise.then(function(taskResult) {
resultArr.push(taskResult);
return resultArr;
});
});
}, Parse.Promise.as([]));
}
If you actually wanted to execute them in parallel, use a simple
function batchPromises(tasks) {
var _ = require('underscore.js');
return Parse.Promise.when(_.map(tasks, function (task) {
return Parse.Promise.as("Promise Resolved for "+taks);
}).then(function() {
return [].slice.call(arguments);
});
}