Using Jquery to get JSON objects from local file.

Question

I'm trying to get a list of JSON objects (products) from a local file using Jquery and store all the objects in a single array called allItems. The file is co-located in the same directory as the code, and it's called "allItems.json". Here's how I'm doing it now:

function getAllSupportedItems(){
    var allItems = new Array();
    $.getJSON("allItems.json",
         function(data){
             $.each(data.items, 
             function(item){
                 allItems.push(item);
             });
         });
    return allItems;
}

Based on this example: http://api.jquery.com/jQuery.getJSON/

Answer 1

How are you using this? If you're expecting the main function ("getAllSupportedItems") to return the array you make, well that won't work. The $.getJSON function is asynchronous, and so the handler won't actually build the array until after the outer function has returned.

Answer 2

For getAllSupportedItems to be able to return any items, the AJAX call needs to run synchronously.

getJSON translates to the following asynchronous call:

$.ajax({
  url: url,
  dataType: 'json',
  data: data,
  success: callback
});

Asynchronous is the default. You therefore need to explicitly change your request to a synchronous one:

$.ajax({
  url: url,
  dataType: 'json',
  data: data,
  success: callback,
  async: false
});

An alternative is to rethink the way you use getAllSupportedItems and make it into an asynchronous utility:

function getAllSupportedItems(callback){
    $.getJSON("allItems.json",
         function(data){
             var allItems = [];
             $.each(data.items, 
             function(item){
                 allItems.push(item);
             });
             callback(allItems);
             // callback(data.items); should also work
         });
}