Question

我正在尝试将JSON文件的内容解析为名为weatherArray的变量。但是，此变量始终为空数组。

let weatherArray = [];

function loadDoc() {
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
        weatherArray = JSON.parse(this.responseText);
      }
    };
    xhttp.open("GET", "https://fcc-weather-api.glitch.me/api/current?lon=55&lat=12", true);
    xhttp.send();
}

/* Expecting the value to be stored and be shown in console*/
console.log(weatherArray);

Answer 1

您在回来之前检查结果。你需要移动这条线：

console.log(weatherArray);

到onreadystatechange函数内部，它将在结果到达后检查结果。你还需要调用loadDoc()函数（你可能已经这样做了）。

＆＃13;

let weatherArray = [];

function loadDoc() {
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
        weatherArray = JSON.parse(this.responseText);
        console.log(weatherArray);
      }
    };
    xhttp.open("GET", "https://fcc-weather-api.glitch.me/api/current?lon=55&lat=12", true);
    xhttp.send();
}
loadDoc();

＆＃13;

编辑如果您想在另一个函数而不是onreadystatechange内处理结果，可以从onreadystatechange调用该函数。您可以使用全局weatherArray执行此操作，但我建议在这种情况下简单地传递参数中的数据：

＆＃13;

function loadDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      showWeather(JSON.parse(this.responseText));
    }
  };
  xhttp.open("GET", "https://fcc-weather-api.glitch.me/api/current?lon=55&lat=12", true);
  xhttp.send();
}

function showWeather(weatherArray) {
  console.log(weatherArray);
}

loadDoc();

＆＃13;

Answer 2

Ajax是异步调用，您在调用ajax调用之前打印数据

我做了一些改变试试。

let weatherArray = [];

function loadDoc() {
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
        weatherArray = JSON.parse(this.responseText);
        console.log(this.responseText);
      }
    };
    xhttp.open("GET", "https://fcc-weather-api.glitch.me/api/current?lon=55&lat=12", true);
    xhttp.send();
    
}
loadDoc();
/* Expecting the value to be stored and be shown in console*/

Answer 3

我想使用Fetch api和Promises提供另一种现代方法。

首先从api
将其转换为json
退还承诺
听取承诺并在回调中记录结果

function loadDoc() {
  return fetch("https://fcc-weather-api.glitch.me/api/current?lon=55&lat=12")
    .then(res => res.json())

}

loadDoc().then((weatherArray) => {
  console.log(weatherArray);
})

无法将JSON文件转换为变量

3 个答案: