skip to Main Content

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>

2

Answers


  1. 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>
    Login or Signup to reply.
  2. <!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>
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search