尝试在 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>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>API Responses</title>
</head>
<body>
<div id="data-container"></div>
<script>
// فرض کنید این دادهها از API دریافت شدهاند
const jsonResponse = {
"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
}
}
]
};
// نمایش تمام دادهها
const container = document.getElementById("data-container");
jsonResponse.response.forEach(item => {
const location = item.loc;
const tempData = item.periods[0].summary.temp;
const div = document.createElement("div");
div.innerHTML = `
<h3>Location: Latitude ${location.lat}, Longitude ${location.long}</h3>
<p>Max Temp: ${tempData.maxC}°C (${tempData.maxF}°F)</p>
<p>Min Temp: ${tempData.minC}°C (${tempData.minF}°F)</p>
<p>Average Temp: ${tempData.avgC}°C (${tempData.avgF}°F)</p>
`;
container.appendChild(div);
});
</script>
</body>
</html