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. — Ates Goral, May 08 '10 at 01:49

score 23 · Accepted Answer · edited Jun 20 '20 at 09:12

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

this doesn't work it says getAllSupportedItems.done is not a function — Evan, Sep 16 '12 at 22:50
@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. — Ates Goral, Sep 17 '12 at 15:09
This is how I load my local JSON files: [link](http://stackoverflow.com/questions/12079631/dynamically-reload-local-javascript-source-json-data/17736371#17736371). I don't use jQuery though. — Matthias Braun, Jul 19 '13 at 00:47

score 0 · Answer 2 · answered May 08 '10 at 00:54

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 08 '10 at 00:54

Pointy

405,095
59
585
614

Ok, that makes sense to me, but being a js n00b, what mechanism do I use to ensure it gets loaded before returning? – ThoughtCrhyme May 08 '10 at 01:22
What you need to do is arrange for the action to happen after the response is recieved. Look over the answer from Ates Goral. – Pointy May 08 '10 at 04:06

Using Jquery to get JSON objects from local file

2 Answers2

Update

Linked