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/

You didn't explicitly state what your question/problem is, but from the code I can see that you're mixing sync/async concepts. You either need to completely go sync or async. — Ateş Göral
– Ateş Göral, Commented May 8, 2010 at 1:49

Community · Accepted Answer · 2020-06-20 09:12:55Z

23

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
         });
}

Update

When I initially wrote this answer, jQuery didn't have built-in Deferred support. It is a lot more concise and flexible to do something like this today:

function getAllSupportedItems( ) {
    return $.getJSON("allItems.json").then(function (data) {
        return data.items;
    });
}

// Usage:
getAllSupportedItems().done(function (items) {
    // you have your items here
});

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered May 8, 2010 at 1:48

Ateş Göral

141k27 gold badges142 silver badges191 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Evan Over a year ago

this doesn't work it says getAllSupportedItems.done is not a function

Ateş Göral Over a year ago

@Even Which version of jQuery did you try it with? It's gotta be 1.6+ I think. Also, you try evaluating: $.Deferred. If it's undefined, you don't have Promise support.

Matthias Braun Over a year ago

This is how I load my local JSON files: link. I don't use jQuery though.

Pointy · Accepted Answer · 2010-05-08 00:54:13Z

0

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.

answered May 8, 2010 at 0:54

Pointy

415k62 gold badges600 silver badges631 bronze badges

2 Comments

ThoughtCrhyme Over a year ago

Ok, that makes sense to me, but being a js n00b, what mechanism do I use to ensure it gets loaded before returning?

Pointy Over a year ago

What you need to do is arrange for the action to happen after the response is recieved. Look over the answer from Ates Goral.

Collectives™ on Stack Overflow

Using Jquery to get JSON objects from local file

2 Answers 2

Update

3 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Update

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related