How to make API calls in Vanilla JS-CodePudding

Am building a weather app using vanilla JS and weatherbit rapid API, but whenever I run the program, it logs an error Can not read properties of undefined (reading 'temp')

const tempValue = document.getElementsByClassName('temp')
// console.log(cityName)

const options = {
  method: 'GET',
  headers: {
    'X-RapidAPI-Key': '************************************',
    'X-RapidAPI-Host': 'weatherbit-v1-mashape.p.rapidapi.com'
  }
}

document.getElementById('submit').addEventListener('click', e => {
  e.preventDefault()

  fetch(
      'https://weatherbit-v1-mashape.p.rapidapi.com/forecast/3hourly?lat=35.5&lon=-78.5',
      options
    )
    .then(response => response.json())
    .then(data => {
      let tempval = data['temp']
      tempValue.innerHtml = tempval
    })
    .catch(err => console.error(err))
})

CodePudding user response：

pls consult the docs. https://rapidapi.com/weatherbit/api/weather

response object structure is:

{
  country_code:"US",
  lon:-78.5,
  data: [...],
  city_name:"Four Oaks",
  lat:35.5,
  timezone:"America/New_York",
  state_code:"NC",
}

To access 'temp'. use `

 fetch(
      'https://weatherbit-v1-mashape.p.rapidapi.com/forecast/3hourly?lat=35.5&lon=-78.5',
      options
    ).then(response => {
          const someItemIndex = 0;
          console.log(response.data);
          const tempval = response.data[someItemIndex].temp
          tempValue.innerHtml = tempval
        })
    .catch(err => console.error(err))

there is no temp in response. and there is no any field 'temp' in data. Temp is defined only on iterable items of data array.