Использование JQuery для получения объектов JSON из локального файла

Я пытаюсь получить список объектов (продуктов) JSON из локального файла с помощью Jquery и хранить все объекты в одном массиве с именем allItems. Файл находится в том же каталоге, что и код, и называется "allItems.json". Вот как я это делаю сейчас:

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

На основе этого примера: http://api.jquery.com/jQuery.getJSON/

Ответы

Ответ 1

Чтобы getAllSupportedItems мог возвращать любые элементы, вызов AJAX должен выполняться синхронно.

getJSON переводится на следующий асинхронный вызов:

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

Асинхронный по умолчанию. Поэтому вам необходимо явно изменить запрос на синхронный:

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

Альтернативой является переосмыслить способ использования getAllSupportedItems и превратить его в асинхронную утилиту:

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

Когда я изначально написал этот ответ, у jQuery не было встроенной поддержки с отсрочкой. Гораздо более сжато и гибко делать что-то подобное сегодня:

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

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

Ответ 2

Как вы это используете? Если вы ожидаете, что основная функция ( "getAllSupportedItems" ) вернет массив, который вы создадите, это не сработает. Функция $.getJSON является асинхронной, поэтому обработчик фактически не будет строить массив до тех пор, пока внешняя функция не вернется.