在頁面加載時將 json 文件讀取為 javascript 變量

Question

我正在嘗試將 json 文件中的數據讀取到 JavaScript 中，以便用戶與頁面交互時調用的其他函數可以使用它。 我已經嘗試過，使用 jQuery 和 JS：

var products = null;
$.getJSON("products.json", function(data) {
  products = data;
  console.log(data);
});
console.log(products);

正如預期的那樣產生：

null
Array [ {…}, {…} ]

我知道這是因為 jQuery 代碼執行的異步特性。 我已經閱讀了一些內容，但我只是在努力思考如何重新構建我的代碼（幾乎完全來自 Python）。

這就是我的看法：

var products = null;
$.getJSON("products.json", function(data) {
  products = data;
  console.log(data);
});

function do_stuff(){
  // Access the attributes of data and do stuff
}

function do_more_stuff(){
  // Do some more stuff with the data
}

我可能會在頁面正文加載時執行do_stuff() ，假設當用戶在下拉菜單中選擇某些內容時執行do_more_stuff 。 兩者都需要訪問 products.json 中的數據。 我知道那里有很多例子，但我就是不明白。 如何重新構建代碼以使其實際工作？

Answer 1

我相信你正在尋找這樣的東西：

function get_json(cb) {
    $.getJSON("products.json", function(data) {
      cb(data);
    });  
}

function cb(data) {
    // do stuff here if you want
    console.log(data)
}

get_json(cb)

創建一個回調 function cb （如果你願意，也可以稱之為 do_stuff ）。 將對該 function 的引用傳遞給您的異步 function (get_json)。 異步操作完成后，使用您收到的數據調用您的回調 function。