Как сделать переменную из JSON, используя XMLHttpRequest?

Question

Я хотел бы получить массив с объектами из json с помощью XMLHttpRequest () и назначить его переменной.

Если я регистрирую его в консоли, он показывает массив.

function getData() {
  let myJson = [];
  var xhr = new XMLHttpRequest();
  var url = 'https://www.reddit.com/r/funny.json';

  xhr.onreadystatechange = function () {

    if (xhr.readyState == 4 && xhr.status == 200) {
      var jsonData = JSON.parse(xhr.responseText);
      arr = jsonData.data.children;

      for (let i = 0; i < arr.length; i++) {
        let newObject = {};
        newObject.title = arr[i].data.title;
        newObject.upvotes = arr[i].data.ups;
        newObject.score = arr[i].data.score;
        newObject.num_comments = arr[i].data.num_comments;
        newObject.created = arr[i].created_utc;
        myJson.push(newObject);
      }
    }
  };
  xhr.open("GET", url, true);
  xhr.send();
  return myJson;
}

let data = getData();

console.log(data[0]);

Но если я пытаюсь что-то сделать с (console.log (data [0]);), он возвращаетне определено.Что я делаю неправильно?Спасибо за любое объяснение!Приветствия.

Answer 1

Просто передайте callback function вместо возврата значения из асинхронного XML-HTTP-запроса.

function getData(callback) {

  var xhr = new XMLHttpRequest();
  var url = 'https://www.reddit.com/r/funny.json';

  xhr.onreadystatechange = function() {

    if (xhr.readyState === 4 && xhr.status === 200) {
      var jsonData = JSON.parse(xhr.responseText);
      arr = jsonData.data.children;

      let myJson = [];
      for (let i = 0; i < arr.length; i++) {
        let newObject = {};
        newObject.title = arr[i].data.title;
        newObject.upvotes = arr[i].data.ups;
        newObject.score = arr[i].data.score;
        newObject.num_comments = arr[i].data.num_comments;
        newObject.created = arr[i].created_utc;
        myJson.push(newObject);
      }

      // Invoke the callback now with your recieved JSON object
      callback(myJson);
    }
  };

  xhr.open("GET", url, true);
  xhr.send();
}

getData(console.log);

Answer 2

Передайте функцию callback для вызова, когда у вас есть данные, или если асинхронный вызов вернет JS Promise , который разрешается с полученными данными.

Answer 3

Ваш return происходит за пределами onreadystatechange. Поэтому вы выходите еще до того, как получите данные.