javascript async woes

Question

This is a newbie JavaScript question, but something I'm not quite sure how to google for help because I'm not sure how to describe the problem in an easy way.

I have a large, somewhat complex JSON that I need to manipulate so that I could reshape the JSON in a way that I get a list of only countries, cities, and sales.

The JSON itself isn't the issue for me, it's what I would like to do with it once I've received it. Basically, I'd like to create 3 separate objects/arrays from a large received JSON and have those 3 separate objects/arrays accessible for usage OUTSIDE of the $.ajax call. Yes, I think I could do all of this inside of the $.ajax success callback, but I'd rather have all the JSON processing done elsewhere. My pseudo JavaScript looks something like this:

var model = {
 countries: [],
 cities: [],
 sales: [],
 set: function(data) {
 //manipulate data here so that model.countries, model.cities, model.sales are populated
 } 
};
$.ajax({
 url: 'example.com/sample.json',
 success: function(data) {
 model.set(data); //is this the right way to do this?
 }
});
$('#countries').html(model.countries);
$('#cities').html(model.cities);
$('#sales').html(model.sales);​

But because JavaScript executes asynchronously, the last 3 lines are always blank because the JSON hasn't been received yet.

So I guess my question is, how do I bind the results of my received JSON to a variable outside of the $.ajax scope so that I could use it wherever on the page?

• nnnnnn: "I could do all of this inside of the $.ajax success callback, but I'd rather have all the JSON processing done elsewhere." - Is putting the processing code in another function that you call from the success callback too much like having the processing directly in the callback? (As a nit-picking aside: note that by the time you access the data parameter of the Ajax success callback it is not JSON any more, it has been parsed (by jQuery) to produce an object.)
• Kevin: Yes. I guess I'd like to be able to access the data once the $.ajax call is complete. It bothers me a bit that I would need to process the data inside of the $.ajax scope, but maybe there are no other solutions?
• nnnnnn: It's not a question of scope, it's a question of when the data is available. Because the ajax call is asynchronous, the $.ajax() function call returns immediately, but the data isn't available until the moment when the success callback is invoked after the underlying Ajax request and response have completed. It can be inconvenient at times, but that's the way async is supposed to work.

Answer 1

The simple solution is this:

$.ajax({
 url: 'example.com/sample.json',
 success: function(data) {
 model.set(data);
 $('#countries').html(model.countries);
 $('#cities').html(model.cities);
 $('#sales').html(model.sales);​
 }
});

If you want something more frameworky, then you could look at a something like Backbone.js.

Answer 2

Populate your HTML (i.e. update your view) in the AJAX success callback. i.e.

function updateView() {
 $('#countries').html(model.countries);
 $('#cities').html(model.cities);
 $('#sales').html(model.sales);​
}
$.ajax({
 url: 'example.com/sample.json',
 success: function(data) {
 model.set(data); //is this the right way to do this?
 updateView();
 }
});

Answer 3

Just put those 3 line in the success callback (you can also separate it into a function) and skip the model population.

There are frameworks that allow you to bind DOM elements to JS objects and their data, bu in this case it might be an overkill.