在页面加载时将 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。