CODEWITHSUNDEEP
javascriptjsonapifetch-api
BANADDA MUBARAKA
BANADDA MUBARAKA

Reputation: 55

How to make API calls in Vanilla JS

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))
})

Error logged

Upvotes: 2

Views: 5949

Answers (2)

BANADDA MUBARAKA
BANADDA MUBARAKA

Reputation: 55

After some advice I received from this platform, I have managed to modify the code and it's working perfectly. The problem was in the way I was accessing the fields from the JSON. I am new to APIs and this is an excellent start for me thank you.

Modified Code

const tempValue = document.querySelector('.temp')
const cityName = document.querySelector('.city_name')
const humid = document.querySelector('.humidity')
const weatherValue = document.querySelector('.weather')

// console.log(cityName)

const options = {
  method: 'GET',
  headers: {
    'X-RapidAPI-Key': '30583b6ad4msh649637ae1b0f6d3p1edde0jsn53b7839146a2',
    '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
  )
      //Modified code
    .then(response => response.json())
    .then(response => {
      const someItemIndex = 0
      console.log(response.data)
      const tempval = response.data[someItemIndex].temp
      const cityval = response.city_name
      const weatherval = response.data[someItemIndex].weather.description
      //   console.log(tempval)
      tempValue.innerHTML = `<h3>Temperature: </h3>${tempval}&#x2103`
      weatherValue.innerHTML = `<h3>Weather Description: </h3>${weatherval}`
      cityName.innerHTML = `<h3>City Name: </h3>${cityval}`
    })
    .catch(err => console.error(err))
})

Upvotes: 0

Eugene_Kr
Eugene_Kr

Reputation: 129

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.

Upvotes: 3

Related Questions