Sequence Of Execution In For Loop / Recursion

I only recently learned about jquery/javascript, and I am facing the following problem. I am trying to control the sequence of function calls in a nested loop and/or recursion in

Solution 1:

That's right, the AJAX requests are asynchronous so you don't know in which order is going to end each one. What you can do is create an array to save the information and use the index of the for loop to have the data ordered, for example, instead of doing this:

 g_asWeather.push("Object " + index + ", Location: " + location + ", rawdate: " + weatherInfo.rawdate + ", Temp: " + weatherInfo.temp + "<br>");

You could do something like that (passing the iLoc as parameter):

 g_asWeather[iLoc] = "Object " + index + ", Location: " + location + ", rawdate: " + weatherInfo.rawdate + ", Temp: " + weatherInfo.temp + "<br>");

So your array will be ordered by the location, if you want to order your array in some other way, just change the variable where it is going to be stored the string.

Solution 2:

To re-reiterate and expand on my comment: The while and for loops are synchronous (happen in order) HOWEVER a couple statements within the getWeatherInfo function are asynchronous (happen out of order). Here is a very basic primer on sync vs async javascript. More specifically, the $.getJSON and $.each functions are both asynchronous. Basically, as soon as the parser gets to the $.getJSON function, the getWeatherInfo function returns and the next iteration of the for loop continues. Similarly, all the iterations of the $.each function are fired off 'all at once' (not technically true, but conceptually) and can complete in any order.

The order of the locations does not really bother me, as long as the location information of a particular location (including its offset) are clustered. Any idea how I can make this happen?

I would recommend altering your data structure and making g_asWeather an object (var g_asWeather = {}; instead of var g_asWeather = [];) with locations as properties. Your $.each loop would look something like this:

// Store something.
$.each(data.data, function(index, weatherInfo){
    g_asWeather[location] = "Object " + index + ", Location: " + location + ", rawdate: " + weatherInfo.rawdate + ", Temp: " + weatherInfo.temp + "<br>";
});

To output the results, something like:

var results = '';
for (var location in g_asWeather) {
    // This check is used because of some non-obvious ways that JavaScript can treat
    // objects. http://phrogz.net/death-to-hasownproperty explains both why to 
    // use it and why not to. 
    if (!g_asWeather.hasOwnProperty(location)) continue;

    results += g_asWeather[location] + '\n';
}

$('#results').html(results);

I would also recommend updating the DOM outside of your loop, but that's another issue. It's also worth noting that while I'm using "array-like" syntax (square brackets) to access the object, that does not mean that the object is an array or can be treated like one.

JavaScript allows a few different syntaxes for accessing object properties. You can use "dot notation" when you are directly accessing a property by name, or using square brackets when passing the property name as a string. Consider the following example:

var foobar = {
    a: 'foo',
    b: 'bar'
};

foobar.a; // 'foo'
foobar['a']; // also 'foo'

foobar.forEach(someCallback); // fails because it's not an array