Используя 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/
2 ответа
Чтобы 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 не имел встроенной поддержки Deferred. Сегодня гораздо лаконичнее и гибче сделать нечто подобное:
function getAllSupportedItems( ) {
return $.getJSON("allItems.json").then(function (data) {
return data.items;
});
}
// Usage:
getAllSupportedItems().done(function (items) {
// you have your items here
});
Как вы это используете? Если вы ожидаете, что главная функция ("getAllSupportedItems") вернет созданный вами массив, то это не сработает. Функция $.getJSON является асинхронной, поэтому обработчик не будет создавать массив до возвращения внешней функции.