Чтение 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 выполняется, когда пользователь выбирает что-то в раскрывающемся меню. Оба должны иметь доступ к данным в продуктах. 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)

Создайте функцию обратного вызова cb (или назовите ее do_stuff, если хотите). Передайте ссылку на эту функцию вашей функции asyn c (get_ json). Когда операция asyn c будет завершена, вызовите функцию обратного вызова с данными, которые вы получили.