![](/img/trans.png)
[英]Vanilla Javascript: .forEach Loop Not Applying Event Listener
[英]We need to go deeper - Deep accessing JSON & array with foreach loop in Vanilla Javascript
对于 Java 脚本来说并不是绝对新的,但在某些方面仍然是新手,包括访问 JSON 对象和 arrays。 我尝试了使用 []array 访问的不同语法和选项,但是失败了。
{
"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');
});
不确定所有循环是关于什么的,因为它正在返回一个城市。
// 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>
由于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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.