How to print one item from api response?-CodePudding

i making an app where you can see the rain percentage on a website. I am using the openweatherapi to get the data. But the api response prints out a lot of array. How to just cut it to one? (the first zero of the array that i want to print) I will post a picture of the reponse. Here is the code:

const api_url = 'https://api.openweathermap.org/data/2.5/onecall?lat=52.1092717&lon=5.1809676&&exclude=current,minutely,timezone,alerts&appid=add524720c6b11d0649d761f76e953c8';
async function getRain() {
  const response = await fetch(api_url);
  const data = await response.json();
  const {
    hourly
  } = data;
  const popArr = hourly.map(element => element.pop);
  hourly.forEach(element => {
    console.log(element.pop);

  });
  // document.getElementById('pop').textContent = pop;
  document.getElementById('pop').textContent = popArr;
}
getRain();

<div id="maintext">
  <p>De regen percentage is: <br><span id="pop"></span>%</p>
</div>

CodePudding user response：

Your data comes per hour. Perhaps you want to show just now?

const api_url = 'https://api.openweathermap.org/data/2.5/onecall?lat=52.1092717&lon=5.1809676&&exclude=current,minutely,timezone,alerts&appid=add524720c6b11d0649d761f76e953c8';
async function getRain() {
  const response = await fetch(api_url);
  const data = await response.json();
  const { hourly } = data;
  const popList = {}
  hourly.forEach(({dt,pop}) => popList[new Date(dt*1000).toLocaleString().split(",")[1].trim()] = pop);
  const time = `${new Date().toLocaleString().match(/(\d{2}):/)[1]}:00:00`;
  document.getElementById('pop').innerHTML = `${time}: ${popList[time]}%`; // percentage at nearest hour
}
getRain();

<div id="maintext">
  <p>De regen percentage is: <br><span id="pop"></span></p>
</div>

CodePudding user response：

You should get only the first item from the hourly array:

const api_url = "https://api.openweathermap.org/data/2.5/onecall?lat=52.1092717&lon=5.1809676&&exclude=current,minutely,timezone,alerts&appid=add524720c6b11d0649d761f76e953c8";

async function getRain() {
  const response = await fetch(api_url);
  const data = await response.json();
  const { hourly } = data; // get hourly data in array of objects form

  // THE CRUCIAL CODE YOU FORGOT
  // You must ONLY GET THE FIRST ITEM from the "hourly" array
  const firstHourData = hourly[0]; // Get the first hour data object from "hourly" array

  document.getElementById("pop").textContent = firstHourData.pop;
}

getRain();

<div id="maintext">
 <p>De regen percentage is: <br /><span id="pop"></span>%</p>
</div>

Alternative way (that commonly used by JS coders)

const api_url = "https://api.openweathermap.org/data/2.5/onecall?lat=52.1092717&lon=5.1809676&&exclude=current,minutely,timezone,alerts&appid=add524720c6b11d0649d761f76e953c8";

async function getRainSimplified() {
  await fetch(api_url)
    .then((response) => {
      return response.json();
    })
    .then(({ hourly }) => {
      document.getElementById("pop").textContent = hourly[0].pop;
    });
}

getRainSimplified();

<div id="maintext">
 <p>De regen percentage is: <br /><span id="pop"></span>%</p>
</div>