We Keep Coding

Parse.Cloud.job promise not working

What I am trying to do here are:
Remove all contents in a class first, because every day the events.json file will be updated. I have my first question here: is there a better way to remove all contents from a database class on Parse?
Then I will send a request to get the events.json and store "name" and "id" of the result into a 2D array.
Then I will send multiple requests to get json files of each "name" and "id" pairs.
Finally, I will store the event detail into database. (one event per row) But now my code will terminate before it downloaded the json files.
Code:
function newLst(results) {
var event = Parse.Object.extend("event");
for (var i = 0; i < results.length; i++){
Parse.Cloud.httpRequest({
url: 'https://api.example.com/events/'+ results[i].name +'/'+ results[i].id +'.json',
success: function(newLst) {
var newJson = JSON.parse(newLst.text);
var newEvent = new event();
newEvent.set("eventId",newJson.data.id);
newEvent.set("eventName",newJson.data.title);
newEvent.save(null, {
success: function(newEvent) {
alert('New object created with objectId: ' + newEvent.id);
},
error: function(newEvent, error) {
alert('Failed to create new object, with error code: ' + error.message);
}
});
},
error: function(newLst) {
}
});
}
};
Parse.Cloud.job("getevent", function(request, status) {
var event = Parse.Object.extend("event");
var query = new Parse.Query(event);
query.notEqualTo("objectId", "lol");
query.limit(1000);
query.find({
success: function(results) {
for (var i = 0; i < results.length; i++) {
var myObject = results[i];
myObject.destroy({
success: function(myObject) {
},
error: function(myObject, error) {
}
});
}
},
error: function(error) {
alert("Error: " + error.code + " " + error.message);
}
});
var params = { url: 'https://api.example.com/events.json'};
Parse.Cloud.httpRequest(params).then(function(httpResponse) {
var results = [];
var jsonobj = JSON.parse(httpResponse.text);
for (var i = 0; i < jsonobj.data.length; i++) {
var tmp2D = {"name":"id"}
tmp2D.name = [jsonobj.data[i].name];
tmp2D.id = [jsonobj.data[i].id];
results.push(tmp2D);
}
newLst(results);
}).then(function() {
status.success("run job");
}, function(error) {
status.error(error);
});
});

I think my original answer is correct as a standalone. Rather than make it unreadable with the additional code, here it is made very specific to your edit.
The key is to eliminate passed callback functions. Everything below uses promises. Another key idea is decompose the activities into logical chunks.
A couple of caveats: (1) There's a lot of code there, and the chances that either your code is mistaken or mine is are still high, but this should communicate the gist of a better design. (2) We're doing enough work in these functions that we might bump into a parse-imposed timeout. Start out by testing all this with small counts.
Start with your question about destroying all instances of class...
// return a promise to destroy all instances of the "event" class
function destroyEvents() {
// is your event class really named with lowercase? uppercase is conventional
var query = new Parse.Query("event");
query.notEqualTo("objectId", "lol"); // doing this because the OP code did it. not sure why
query.limit(1000);
return query.find().then(function(results) {
return Parse.Object.destroyAll(results);
});
}
Next, get remote events and format them as simple JSON. See the comment. I'm pretty sure your idea of a "2D array" was ill-advised, but I may be misunderstanding your data...
// return a promise to fetch remote events and format them as an array of objects
//
// note - this differs from the OP data. this will evaluate to:
// [ { "name":"someName0", id:"someId0" }, { "name":"someName1", id:"someId1" }, ...]
//
// original code was producing:
// [ { "name":["someName0"], id:["someId0"] }, { "name":["someName1"], id:["someId1"] }, ...]
//
function fetchRemoteEvents() {
var params = { url: 'https://api.example.com/events.json'};
return Parse.Cloud.httpRequest(params).then(function(httpResponse) {
var results = [];
var remoteEvents = JSON.parse(httpResponse.text).data;
for (var i = 0; i < remoteEvents.length; i++) {
var remoteEvent = { "name": remoteEvents[i].name, "id": remoteEvents[i].id };
results.push(remoteEvent);
}
return results;
});
}
Please double check all of my work above regarding the format (e.g. response.text, JSON.parse().data, etc).
Its too easy to get confused when you mix callbacks and promises, and even worse when you're generating promises in a loop. Here again, we break out a simple operation, to create a single parse.com object based on one of the single remote events we got in the function above...
// return a promise to create a new native event based on a remoteEvent
function nativeEventFromRemoteEvent(remoteEvent) {
var url = 'https://api.example.com/events/'+ remoteEvent.name +'/'+ remoteEvent.id +'.json';
return Parse.Cloud.httpRequest({ url:url }).then(function(response) {
var eventDetail = JSON.parse(response.text).data;
var Event = Parse.Object.extend("event");
var event = new Event();
event.set("eventId", eventDetail.id);
event.set("eventName", eventDetail.title);
return event.save();
});
}
Finally, we can bring it together in a job that is simple to read, certain to do things in the desired order, and certain to call success() when (and only when) it finishes successfully...
// the parse job removes all events, fetches remote data that describe events
// then builds events from those descriptions
Parse.Cloud.job("getevent", function(request, status) {
destroyEvents().then(function() {
return fetchRemoteEvents();
}).then(function(remoteEvents) {
var newEventPromises = [];
for (var i = 0; i < remoteEvents.length; i++) {
var remoteEvent = remoteEvents[i];
newEventPromises.push(nativeEventFromRemoteEvent(remoteEvent));
}
return Parse.Promise.when(newEventPromises);
}).then(function() {
status.success("run job");
}, function(error) {
status.error(error);
});
});

The posted code does just one http request so there's no need for an array of promises or the invocation of Promise.when(). The rest of what might be happening is obscured by mixing the callback parameters to httpRequest with the promises and the assignment inside the push.
Here's a clarified rewrite:
Parse.Cloud.job("getevent", function(request, status) {
var promises = [];
var params = { url: 'https://api.example.com'};
Parse.Cloud.httpRequest(params).then(function(httpResponse) {
var results = [];
var jsonobj = JSON.parse(httpResponse.text);
for (var i = 0; i < jsonobj.data.length; i++) {
// some code
}
}).then(function() {
status.success("run job");
}, function(error) {
status.error(error);
});
});
But there's a very strong caveat here: this works only if ("// some code") that appears in your original post doesn't itself try to do any asynch work, database or otherwise.
Lets say you do need to do asynch work in that loop. Move that work to a promise-returning function collect those in an array, and then use Promise.when(). e.g....
// return a promise to look up some object, change it and save it...
function findChangeSave(someJSON) {
var query = new Parse.Query("SomeClass");
query.equalTo("someAttribute", someJSON.lookupAttribute);
return query.first().then(function(object) {
object.set("someOtherAttribute", someJSON.otherAttribute);
return object.save();
});
}
Then, in your loop...
var jsonobj = JSON.parse(httpResponse.text);
var promises = [];
for (var i = 0; i < jsonobj.data.length; i++) {
// some code, which is really:
var someJSON = jsonobj.data[i];
promises.push(findChangeSave(someJSON));
}
return Parse.Promise.when(promises);

Populating an object with ajax in a loop

I need to pull data from a series of .csv files off the server. I am converting the csvs into arrays and I am trying to keep them all in an object. The ajax requests are all successful, but for some reason only the data from the last request ends up in the object. Here is my code:
var populate_chart_data = function(){
"use strict";
var genders = ["Boys","Girls"];
var charts = {
WHO: ["HCFA", "IWFA", "LFA", "WFA", "WFL"],
CDC: ["BMIAGE", "HCA", "IWFA", "LFA", "SFA", "WFA", "WFL", "WFS"]
};
var fileName, fileString;
var chart_data = {};
for (var i=0; i < genders.length; i++){
for (var item in charts){
if (charts.hasOwnProperty(item)){
for (var j=0; j<charts[item].length; j++) {
fileName = genders[i] + '_' + item + '_' + charts[item][j];
fileString = pathString + fileName + '.csv';
$.ajax(fileString, {
success: function(data) {
chart_data[fileName] = csvToArray(data);
},
error: function() {
console.log("Failed to retrieve csv");
},
timeout: 300000
});
}
}
}
}
return chart_data;
};
var chart_data = populate_chart_data();
The console in Firebug shows every ajax request successful, but when I step through the loops, my chart_data object is empty until the final loop. This is my first foray into ajax. Is it a timing issue?

There are two things you need to consider here:
The AJAX calls are asynchronous, this means you callback will only be called as soon as you receive the data. Meanwhile your loop keeps going and queueing new requests.
Since you're loop is going on, the value of filename will change before your callback is executed.
So you need to do two things:
Push the requests into an array and only return when the array completes
Create a closure so your filename doesn't change
.
var chart_data = [];
var requests = [];
for (var j=0; j<charts[item].length; j++) {
fileName = genders[i] + '_' + item + '_' + charts[item][j];
fileString = pathString + fileName + '.csv';
var onSuccess = (function(filenameinclosure){ // closure for your filename
return function(data){
chart_data[filenameinclosure] = csvToArray(data);
};
})(fileName);
requests.push( // saving requests
$.ajax(fileString, {
success: onSuccess,
error: function() {
console.log("Failed to retrieve csv");
},
timeout: 300000
})
);
}
$.when.apply(undefined, requests).done(function () {
// chart_data is filled up
});

I'm surprised that any data ends up in the object. The thing about ajax is that you can't depend on ever knowing when the request will complete (or if it even will complete). Therefore any work that depends on the retrieved data must be done in the ajax callbacks. You could so something like this:
var requests = [];
var chart_data = {};
/* snip */
requests.push($.ajax(fileString, {
/* snip */
$.when.apply(undefined, requests).done(function () {
//chart_data should be full
});

How to pass an array of objects from actionscript to javascript

AS3:
ExternalInterface.addCallback('getParams', getParams);
function getParams()
{
var params:Array = new Array();
for(i = 0; i < images.length; i++)
{
params.push(picWin.getChildAt(i));
}
return params;
}
JS:
$('#button').click(function(){
var res = document.getElementById("swfobject").getParams();
alert(res);
})
So after i get an error of some NPO object error, can't figure it out what it means, but if I pass an array itself its ok, if I pass an object itself it will be also ok, but when i pass an array of objects it gives me an error NPO, how to fix this?

To pass from AS to JS you want to use
ExternalInterface.call("myJsFunction", myArray);
for this example, you need 2 JS functions: the first handles the click and sends a request to your swf. The second is called by the swf with your return value:
AS3:
ExternalInterface.addCallback('getParams', getParams); // listens for JS to getParams
function getParams()
{
var params:Array = new Array();
for(i = 0; i < images.length; i++)
{
params.push(picWin.getChildAt(i));
}
ExternalInterface.call("handleParams", params); // calls a js function and passes params
}
JS:
$('#button').click(handleClick)
function handleClick(event){
document.getElementById("swfobject").getParams(); //sends request to swf
}
function handleParams(params){ // handles response from swf
alert("You got an array with " + params.length + " elements back from flash.");
}

Send xmlHttpRequest every 10 second in JavaScript

I run a JavaScript function that send a xmlHttpRequest to an .ashx (let's name it send_req() that run on page load for first time). For onreadystatechange, I have a function that receive XML data and show it on the page (let's name this one getanswer()).
I want to automatically update XML data on the page every 20 seconds. For that, I use setTimeout(send_req(),20000) in the end of writexml(), but it doesn't update data on the page. I add an alert() at the **** line in the code. It shows on the page every one second!
And my code works fine if I use it without setTimeout.
Here is my code
var Population = "";
var Available_money = "";
var resource_timer;
var httpReq_resource;
function send_req() {
if (window.ActiveXObject) {
httpReq_resource = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest) {
httpReq_resource = new XMLHttpRequest();
}
var sendStr = "user_id=1";
if (httpReq_resource)
{
httpReq_resource.onreadystatechange = getanswer;
httpReq_resource.open("POST", "Answer_Resource_change.ashx");
httpReq_resource.send(sendStr);
}
}
function getanswer() {
var results = httpReq_resource.responseXML;
if (httpReq_resource.readyState == 4) {
if (httpReq_resource.status == 200) {
try {
var value;
var values = results.getElementsByTagName("values");
for (var i = 0; i < values.length; i++) {
value = values[i];
Population = value.getElementsByTagName("Population")[0].firstChild.nodeValue;
Available_money = value.getElementsByTagName("Available_money")[0].firstChild.nodeValue;
... and some more like two line up
}
make_changes();
**********************************
resource_timer = setTimeout(send_req(), 20000);
}
catch (e) {
}
}
}
}
function make_changes() {
$("li span#l1").text(Available_money + '/' + Population);
...and some more like up line
}

This:
resource_timer = setTimeout(send_req(), 20000);
Should be:
resource_timer = setTimeout(send_req, 20000);
The first executes the result of send_req() after 20 seconds, the second executes send_req itself.

Multi-Array of XML Requests

OMG, I am in need of a way to set up arrays of XML Requests based on the idShout - 1.
So it would be something like this...
var req = new Array();
req[idShout - 1] = ALL XML Data...
Here's what I got so far but it's not working at all :(
var idShout;
var req = new Array();
function htmlRequest(url, params, method)
{
req[req.push] = ajax_function();
for (i=0;i<req.length;i++)
{
(function (i) {
if (req[i])
{
if (method == "GET")
{
req[i].onreadystatechange = function()
{
if (req[i].readyState != 4)
return;
if (req[i].responseText !== null && req[i].status == 200)
{
document.getElementById("shoutbox_area" + idShout).innerHTML = req[i].responseText;
}
}
}
req[i].open(method,url,true);
if (method == "POST")
req[i].setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
if (params == "")
req[i].send(null);
else
req[i].send(params);
return req[i];
}
else
return null;
})(i);
}
}
function ajax_function()
{
var ajax_request = null;
try
{
// Opera 8.0+, Firefox, Safari
ajax_request = new XMLHttpRequest();
}
catch (e)
{
// IE Browsers
try
{
ajax_request = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
try
{
ajax_request = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e)
{
//No browser support, rare case
return null;
}
}
}
return ajax_request;
}
function send(which)
{
var send_data = "shoutmessage=" + document.getElementById("shout_message" + which).value;
var url = smf_prepareScriptUrl(smf_scripturl) + "action=dreamaction;sa=shoutbox;xml;send_shout="+ which;
htmlRequest(url, send_data, "POST");
document.getElementById("shout_message" + which).value = "";
document.getElementById("shout_message" + which).focus();
return true;
}
function startShouts(refreshRate, shoutCount)
{
clearInterval(Timer[shoutCount-1]);
idShout = shoutCount;
show_shouts();
Timer[shoutCount - 1] = setInterval("show_shouts()", refreshRate);
return;
}
function show_shouts()
{
var url = smf_prepareScriptUrl(smf_scripturl) + "action=dreamaction;sa=shoutbox;xml;get_shouts=" + idShout;
htmlRequest(url, "", "GET");
}
Any help at all on this would be greatly appreciated...
Basically, I'm setting the Timer Arrays in a different function before this, and I call startShouts which is supposed to show all of the information, but startShouts gets called more than once, which is why I have idShout set to equal shoutCount. So it will go something like this: shoutCount = 1, shoutCount = 2, shoutCount = 3, everytime it is being called. So I set the req[idShout - 1] array and it should return the result right??
Well, I get no errors in Firefox in the error console with this code above, but it doesn't work... Any ideas anyone?? As it needs to output into more than 1 area... argg.
Thanks for any help you can offer here :)
Thanks guys :)
Also, a little more info on this...
Basically there is 1 or more Shoutboxes on any given page (Don't ask why?), I need to be able to grab the info of this and put it into the document.getElementById("shoutbox_area" + idShout), since the idShout for each element changes incrementing by 1 for each Shoutbox that is on that page. The values for the Shoutbox can be different, example the refreshRate can be different. 1 Shoutbox can have a refresh rate of like 2000 milliseconds, while the other can have a rate of 250 milliseconds, they need to be different and refresh at the times that are defined for them, so this is why I decided to make a Timer array, though not sure I have setup the Timer array the way it is meant to be setup for the setInterval function. Here is the way it get's done in a different javascript function that runs just before startShouts gets called...
This part is outside of the function and within the document itself:
var Timer = new Array();
And this part is in the function...
Timer[shoutCount - 1] = "";
So not sure if this is correctly setup for Timers...?

Since XHRs are asynchronous, by the time the readystatechange callback function fires the value of i has changed. You need to create a separate closure for the i variable during your loop. The easiest way to do this is wrap an anonymous function around the code block and call it with i passed as the first argument:
for (i=0;i<req.length;i++)
{
(function (i) {
if (req[i])
{
if (HttpMethod == "GET")
{
req[i].onreadystatechange = function()
{
if (req[i].readyState != 4)
return;
if (req[i].responseText !== null && req[i].status == 200)
{
document.getElementById("shoutbox_area" + idShout).innerHTML = req[i].responseText;
}
}
}
req[i].open(HttpMethod,url,true);
if (HttpMethod == "POST")
req[i].setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
if (params == "")
req[i].send(null);
else
req[i].send(params);
return req[i];
}
else
return null;
})(i);
}