Question

108

Using Jquery to get JSON objects from local file

rated 0 times [ 110] [ 2] / answers: 1 / hits: 41102 / 14 Years ago, sat, may 8, 2010, 12:00:00

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/

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

zahrafrancisr

Add To Favorites

Follow

Total Points: 176

Total Questions: 105

Total Answers: 99

Location: Svalbard and Jan Mayen

Member since Sun, Sep 25, 2022

2 Years ago

zahrafrancisr questions

1 Display a Swiper slider when clicking a thumbnail in a gallery

Fri, Mar 19, 21, 00:00, 3 Years ago

1 Confirming Password is still displaying Passwords do not match even when passwords do match

Mon, Dec 28, 20, 00:00, 3 Years ago

1 How to add regular expression to filter out the xhr URL in Cypress

Wed, Nov 11, 20, 00:00, 4 Years ago

1 What are some JS library alternatives for Animate On Scroll (aos)?

Mon, Aug 31, 20, 00:00, 4 Years ago

1 How to pass array of objects in angular app from one component to another component

Fri, Jul 17, 20, 00:00, 4 Years ago

View All

answered 14 Years ago editha · Accepted Answer

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

});