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>