尝试在 html 上显示不同的 API JSON 响应，而不是仅显示一个。 API 请求返回三个不同的响应，但 html 只会显示第一个响应。无论退货数量如何，如何让它显示所有回复？
当从API请求信息时，这是我得到的JSON响应。
{
"success": true,
"error": null,
"response": [
{
"periods": [
{
"summary": {
"temp": {
"maxC": 6,
"maxF": 44,
"minC": 3,
"minF": 37,
"avgC": 3.8,
"avgF": 38.8,
"count": 177,
"qc": 10
},
"dewpt": {
"maxC": 4,
"maxF": 39,
"minC": 1,
"minF": 33,
"avgC": 1.6,
"avgF": 34.9,
"count": 177,
"qc": 10
}
}
}
],
"loc": {
"long": -93.249759078026,
"lat": 44.977344633615
}
},
{
"periods": [
{
"summary": {
"temp": {
"maxC": 7,
"maxF": 44,
"minC": 3,
"minF": 38,
"avgC": 4.2,
"avgF": 39.5,
"count": 159,
"qc": 10
},
"dewpt": {
"maxC": 4,
"maxF": 38,
"minC": 1,
"minF": 33,
"avgC": 1.5,
"avgF": 34.7,
"count": 159,
"qc": 10
}
}
}
],
"loc": {
"long": -93.248161315918,
"lat": 44.962871551514
}
},
{
"periods": [
{
"summary": {
"temp": {
"maxC": 7,
"maxF": 44,
"minC": 3,
"minF": 37,
"avgC": 4.2,
"avgF": 39.6,
"count": 828,
"qc": 10
},
"dewpt": {
"maxC": 5,
"maxF": 41,
"minC": 2,
"minF": 35,
"avgC": 2.8,
"avgF": 37,
"count": 828,
"qc": 10
}
}
}
],
"loc": {
"long": -93.328,
"lat": 45.001
}
}
]
}
我在 html 上使用此脚本来显示结果。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Weather Alerts</title>
<script defer src="https://cdn.aerisapi.com/sdk/js/latest/aerisweather.min.js"></script>
<style>
#alerts .tempicon {
position: absolute;
top: 5px;
left: 10px;
width: 170px;
height: 170px;
}
#alerts .temptext {
position: absolute;
top: 55px;
left: 30px;
color: #ffffff;
font-size: 50px;
font-family: Arial, Helvetica, sans-serif;
text-shadow: 2px 2px 5px black;
}
</style>
</head>
<body topmargin="0" leftmargin="0">
<div id="alerts"></div>
<script>
window.onload = () => {
const target = document.getElementById('alerts');
const aeris = new AerisWeather('[CLIENT_ID]', '[CLIENT_SECRET]');
const request = aeris.api().endpoint('observations/summary').place('minneapolis,mn').from('today');
request.get().then((result) => {
const periods = result.data;
if (periods) {
console.log(periods);
const html = (`
<img src="https://dakotaradar.org/newicons/temps/${periods[0].periods[0].summary.temp.maxF}.png" class="tempicon">
<div class="temptext">${periods[0].periods[0].summary.temp.maxF}°F</div>
`);
target.innerHTML = html;
}
});
};
</script>
</body>
</html>
这可能有效，保留代码的逻辑。
target.innerHTML = '';
if (periods) {
periods[0].periods.forEach(function(period)) {
const html = (`
<img src="https://dakotaradar.org/newicons/temps/${period.summary.temp.maxF}.png" class="tempicon">
<div class="temptext">${period.summary.temp.maxF}°F</div>
`);
target.innerHTML += html;
}
}