web-dev-qa-db-ja.com

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

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/

javascriptjqueryjsonlocal-files
12
ThoughtCrhyme

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
});
23
Ates Goral

これをどのように使用していますか？メイン関数（ "getAllSupportedItems"）がreturn作成した配列になることを期待している場合、それは機能しません。 $.getJSON関数は非同期であるため、ハンドラーは、外部関数が返されるまで実際には配列を作成しません。

0
Pointy