Question

如何使用循环显示从json到html的所有数据来显示所有数据？

ATM，我可以打印其中一个数据。但如果我使用数据[i]，代码将不会显示任何数据。

我认为我搞砸了对象和数组的概念。请告诉我，如何循环通过对象，如数组？

谢谢

＆＃13;

var getWeather =  document.getElementById('weather');

var requestWeather = new XMLHttpRequest();

//+'-31' +'&lon='+'150'

requestWeather.open('GET','https://fcc-weather-api.glitch.me/api/current?lat=-31&lon=150');
requestWeather.onload = function () {
    var weatherData = JSON.parse(requestWeather.responseText);
    console.log(weatherData);
    getHTML(weatherData);
};

requestWeather.send();

function getHTML(data) {
    var weatherString = "";

    for(var i in data.weather ){

        var x=  data.weather[i].main;
    weatherString+= "<p class='weather'>"  + x + "</p>";
    // weatherString+= "<p>"  + data.currently.summary + "</p>";
    // console.log(data[i].city);
    }
    
    
    getWeather.insertAdjacentHTML("beforeend", weatherString);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="weather"></div>

＆＃13;

Answer 1

获取所有数据检查对象并执行递归循环

＆＃13;

var getWeather = document.getElementById('weather');

var requestWeather = new XMLHttpRequest();

//+'-31' +'&lon='+'150'

requestWeather.open('GET', 'https://fcc-weather-api.glitch.me/api/current?lat=-31&lon=150');
requestWeather.onload = function() {
  var weatherData = JSON.parse(requestWeather.responseText);
  //console.log(weatherData);
  getHTML(weatherData);
};

requestWeather.send();

function getHTML(data) {
  var weatherString = "";
  for(var i in data) {
    var x = data[i];
    if(typeof(x) == "object") {
      getHTML(x);
    }
    else {
      weatherString += "<p class='weather'><b>" + i + "</b>: " + x + "</p>";
      // weatherString+= "<p>"  + data.currently.summary + "</p>";
      // console.log(data[i].city);
    }
  }
  getWeather.insertAdjacentHTML("beforeend", weatherString);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="weather"></div>

＆＃13;

Answer 2

＆＃13;

var getWeather = document.getElementById('weather');

var requestWeather = new XMLHttpRequest();

//+'-31' +'&lon='+'150'

requestWeather.open('GET', 'https://fcc-weather-api.glitch.me/api/current?lat=-31&lon=150');
requestWeather.onload = function() {
  var weatherData = JSON.parse(requestWeather.responseText);
  
  getHTML(weatherData);
};

requestWeather.send();

function getHTML(data) {
  var weatherString = "";

  for (var i in data.weather) {

    var x = data.weather[i].main;
    weatherString += "<p class='weather'>" + x + "</p>";

    $.each(data.main, function(i, f) {
      var main = "<div>" + i + ": " + f + "</div>";
      $(main).appendTo("#main");
    });
  }


  getWeather.insertAdjacentHTML("beforeend", weatherString);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="weather"></div>

<div id="main"></div>

＆＃13;

Answer 3

使用foreach循环迭代所有对象 read more from here

如何使用循环获取此数据？

3 个答案: