javascript - 如何使用 XMLHttpRequest 从 json 生成变量？

Question

我想使用 XMLHttpRequest() 从 json 获取一个包含对象的数组，并将其分配给一个变量。

如果我将其记录在控制台中，它会显示数组。

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);