使用JavaScript/jQuery在本地獲取JSON

我已經閱讀了幾個問題，指出由於安全政策等原因，JSON文件無法在Google Chrome本地加載。因此，我在http://youmightnotneedjquery.com/上找到了解決方案。使用JavaScript/jQuery在本地獲取JSON

我的JavaScript現在看起來是這樣的：

jQuery(document).ready(function($){ 
    var items = []; 
    var settingsFile = "corr/settings.json"; 
    var sidePanel = $(document.createElement('div')).addClass('corrPanel').appendTo('body'); 
    /** 
    * Gets JSON file 
    * @param string jsonFile 
    * @return json file contents 
    */ 
    function getSettings(jsonFile) { 
     request = new XMLHttpRequest(); 
     request.open('GET', jsonFile, true); 
     request.onload = function() { 
      if (request.status >= 200 && request.status < 400) { 
       jsonRows = JSON.parse(request.responseText); 
       console.log(jsonRows); 
       $.each(jsonRows, function(key, row) { 
        items.push("<input type='text' class='iris' id='" + row.section + "'>"); 
       }); 
       console.log(items); 
      } else { 
       console.log("Error getting JSON file"); 
      } 
     }; 
     request.send(); 
    } 

    getSettings(settingsFile); 
    console.log(items); 
});

CONSOLE.LOG返回JSON文件的輸出沒有問題。

SO，一切正常，但由於我是新來的JavaScript（和不`噸真的知道如何使用功能和性能有工作），該數據屬性未設置（並返回），所以結果屬性也是未定義的。

你能告訴我如何在函數外部傳遞請求結果嗎？

感謝

編輯：我加推結果項目陣列，它是在的getSettings函數的局部上下文中可用，但最後的console.log未輸出。

來源

2016-02-06 falnyr

'所以我找到了solution' - 不，你沒有......鉻不會讀文件：/// URI的，除非你有一個特定的命令行選項啓動它......那麼即使jQuery的作品，無論如何，jquery只是包裝xmlhttprequest –

無論你使用什麼庫，你都不能從異步請求返回響應。或者使用'callbacks'或者在'success'回調函數中執行這些操作。回答：https：//jsfiddle.net/rayon_1990/bt59y2L2/ – Rayon

@RayonDabre對我而言，回調會是什麼？由於json是對象的數組，我可以迭代它們還是......你能給我一個例子嗎？ – falnyr

整個問題是我試圖直接訪問項目屬性。但是設置它的請求在頁面加載後被調用。所以我把邏輯轉移到了成功的一部分。

if (request.status >= 200 && request.status < 400) { 
    // execute success code and manage items here ... 
}

來源

2016-02-06 15:43:17 falnyr

使用JavaScript/jQuery在本地獲取JSON

回答

相關問題