我們需要更深入地訪問 go - 在 Vanilla Javascript 中使用 foreach 循環深度訪問 JSON 和數組

Question

對於 Java 腳本來說並不是絕對新的，但在某些方面仍然是新手，包括訪問 JSON 對象和 arrays。 我嘗試了使用 []array 訪問的不同語法和選項，但是失敗了。

我想在這個位置訪問 JSON 文件。

{
  "coord": {
    "lon": -0.13,
    "lat": 51.51
  },
  "weather": [{
    "id": 521,
    "main": "Rain",
    "description": "shower rain",
    "icon": "09d"
  }],
  "base": "stations",
  "main": {
    "temp": 289.89,
    "pressure": 1002,
    "humidity": 87,
    "temp_min": 288.15,
    "temp_max": 291.48
  },
  "visibility": 10000,
  "wind": {
    "speed": 5.1,
    "deg": 210,
    "gust": 10.8
  },
  "rain": {
    "1h": 0.25
  },
  "clouds": {
    "all": 40
  },
  "dt": 1569596940,
  "sys": {
    "type": 1,
    "id": 1414,
    "message": 0.012,
    "country": "GB",
    "sunrise": 1569563635,
    "sunset": 1569606559
  },
  "timezone": 3600,
  "id": 2643743,
  "name": "London",
  "cod": 200
}

使用 foreach 循環訪問數據，我不太確定正確的語法如何。

最終，我只想用字符串文字實現以下目標：

在 HTML 中顯示：

City ID
City Weather Description
City Name

見代碼：

// weather api definition
let url = 'http://api.openweathermap.org/data/2.5/weather?q=London&APPID=7b67b3fc2a0559b8301bd032e8f2f1c7'
let weatherInfo = document.getElementById('title');

fetch(url).then(function (response) {
  return response.json();
})
.then(function(data) {
  document.getElementById('weather-info').innerHTML = '<h2 id="title"></h2>';
  document.getElementById('title').innerHTML = 'THIS IS JASOOON';
  //here is where my problems start
  let output = '<h4>Weather Info - cities</h4>';
  data.foreach((item)=> {
    console.log(item.weather)
  });

  data.foreach(function(item) {
    output += `
  <ul>
    <li> City ID: ${item.id} </li>
    <li> City Weather Description: ${item.description} </li>
    <li> City Name ${item.name} </li>
  </ul>`;

  document.getElementById('weather-info').innerHTML = output;
  });

})
.catch(err => {
  console.log('errorMessage');
});

Answer 1

不確定所有循環是關於什么的，因為它正在返回一個城市。

 // weather api definition let url = 'http://api.openweathermap.org/data/2.5/weather?q=London&APPID=7b67b3fc2a0559b8301bd032e8f2f1c7' let weatherInfo = document.getElementById('title'); fetch(url).then(function(response) { return response.json(); }).then(function(data) { const weather = data.weather.map(report => report.description).join(", ") let output = ` <h4>Weather Info - cities</h4> <ul> <li> City ID: ${data.id} </li> <li> City Weather Description: ${weather} </li> <li> City Name ${data.name} </li> </ul>`; document.getElementById('weather-info').innerHTML = output; }).catch(err => { console.log('errorMessage'); });

 <div id="weather-info"></div>

Answer 2

由於Weather屬性是一個Array ，因此您可以對其進行迭代。

 let url = 'http://api.openweathermap.org/data/2.5/weather?q=London&APPID=7b67b3fc2a0559b8301bd032e8f2f1c7' fetch(url).then(function (response) { return response.json(); }).then(function (data) { let output = '<h4>Weather Info - cities</h4>'; // access the weather property and loop through it data.weather.forEach(function (item) { // log the Stringfied version console.log(JSON.stringify(item)); output += ` <ul> <li> City ID: ${item.id} </li> <li> City Weather Description: ${item.description} </li> <li> City Name ${data.name} </li> </ul> <br>`; document.getElementById('weather-info').innerHTML = output; }); }).catch(err => { console.log(err.message); console.log('errorMessage'); });

 <div id="weather-info"></div>