Html - Displaying multiple returns from API JSON response

tater
November 13, 2024
152 views
0 votes
2 Answers

Attempting to display different API JSON responses on an HTML page instead of only one. The API request comes back with three different responses but the html only will show the first one. How do I get this to display all responses no matter the number of returns?

When requesting the information from API, this is the JSON response I get.

{
  "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
      }
    }
  ]
}

I am using this script on an html to show the results.

<!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>

Answers

You just need to loop over the result array. Make sure you don’t output them all on the same position, though. I changed your CSS a little.

const d = {
  "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 target = document.getElementById('alerts')
const periods = d.response
target.innerHTML = '';
if (periods) {

  periods.forEach(function(item) {

    const period = item.periods[0]
    const html = (`
<img src="https://dakotaradar.org/newicons/temps/${period.summary.temp.maxF}.png"  class="tempicon">
<div class="temptext">${period.summary.temp.maxF}&#176;F</div>
`);
    target.innerHTML += html;
  })
}

#alerts .tempicon {
  position: relative;
  top: 5px;
  left: 10px;
  width: 170px;
  height: 170px;
}

#alerts .temptext {
  position: relative;
  top: -55px;
  left: 30px;
  color: #ffffff;
  font-size: 50px;
  font-family: Arial, Helvetica, sans-serif;
  text-shadow: 2px 2px 5px black;
}

<script defer src="https://cdn.aerisapi.com/sdk/js/latest/aerisweather.min.js"></script>

<div id="alerts"></div>

<!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>

Please signup or login to give your own answer.

Click here to cancel reply.

Html – Displaying multiple returns from API JSON response

Answers