jQueryを使用して、ローカルファイルからJSONオブジェクトを取得します

Question

jQueryを使用してローカルファイルからJSONオブジェクト（製品）のリストを取得し、すべてのオブジェクトを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/

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

---

アップデート

私が最初にこの答えを書いたとき、jQueryには延期されたサポートが組み込まれていませんでした。今日はこのようなことをするのはもっと簡潔で柔軟です：

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

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

Answer 2

これをどのように使用していますか？主な関数（ "getallsuporteditems"）を期待している場合 戻る あなたが作る配列、それはうまくいきません。 $.getJSON 関数はです 非同期, 、したがって、ハンドラーは、外側の関数が返されるまで実際に配列を構築しません。