DEV Community

mitchelln11
mitchelln11

Posted on

Undefined Nested Object in REST API with React Hooks?

#react #help

Having trouble trying to access nested objects in the OpenWeather REST API. Getting full results in Postman, but not when trying to render.

Postman results(condensed):

{
"coord": {
    "lon": -0.13,
    "lat": 51.51
},
"weather": [
    {
        "id": 500,
        "main": "Rain"
    }
],
"main": {
    "temp": 290.38
},
"name": "London"
}

Using const [openWeather, setweather] = useState([]);
If I want to access name, I can easily do that with openWeather.name, which works just fine when returning "London".

However, if I try openWeather.weather[0].main, it comes back as undefined. Why would that be?

If I change my setWeather to: setWeather(data.data.weather[0].main);, I am able to return "Rain" by using openWeather.main.

Anything would help, thanks.

Top comments (14)

Collapse
 
suelopoder profile image
Diego Sisto •

It's most likely something silly. Try console.log(openWeather, openWeather.weather, openWeather.weather[0])

Collapse
 
mitchelln11 profile image
mitchelln11 •

comes back undefined.

Collapse
 
suelopoder profile image
Diego Sisto •

You should have 3 outputs. Is that undefined, undefined, undefined?
Can we get the full code?

Thread Thread
 
mitchelln11 profile image
mitchelln11 •

Unhandled Rejection (TypeError): Cannot read property '0' of undefined. Breaks the page, doesn't even log anything.

Thread Thread
 
suelopoder profile image
Diego Sisto •

Can we see the code please? It could be a number of things.

Thread Thread
 
mitchelln11 profile image
mitchelln11 •

It is in React and uses hooks.

import React, { useState, useEffect } from 'react';
import axios from 'axios';

const LocalWeather = () => {
    const [openWeather, setWeather] = useState([]);

    useEffect(() => {
        axiosGet();
    }, []); //  Run once on load

    const axiosGet = () => {
        const data = axios.get(`https://api.openweathermap.org/data/2.5/weather?q=London,uk&APPID=${process.env.REACT_APP_WEATHER_KEY}`)
        .then(data => setWeather(data.data));
    console.log(openWeather, openWeather.weather, openWeather.weather[0]);
    }

    return (
        <ul>
            <li>{openWeather.name}</li>
            <li>{openWeather.cod}</li>
            <li>{openWeather.id}</li>
            <li>{openWeather.timezone}</li>
            <li>{openWeather.dt}</li>
            <li>{openWeather.visibility}</li>
            <li>{openWeather.base}</li>
            {/* <li>{openWeather.current.weather[0].main}</li> */}
        </ul>
    );
}

export default LocalWeather;

The console.log in the axiosGet method is breaking the page.

Thread Thread
 
suelopoder profile image
Diego Sisto •

Thanks!
Let's change the console.log(openWeather, openWeather.weather, openWeather.weather[0]); to be inside the then callback:

const axiosGet = () => {
      const data = axios.get(`https://api.openweathermap.org/data/2.5/weather?q=London,uk&APPID=${process.env.REACT_APP_WEATHER_KEY}`)
      .then(data => {
        setWeather(data.data);
        console.log('Service data was', data.data);
      });
  }

That will give you an idea of what's actually stored in openWeather.

On the other hand, you got a current in the failing line. .current is used for react ref but not for state. Try removing that.

Good luck!

Thread Thread
 
mitchelln11 profile image
mitchelln11 •

Get the following:

Service data was Array(0)length: 0__proto__: Array(0)

I also removed the current. Thanks, I forgot I had that in there.

Thread Thread
 
suelopoder profile image
Diego Sisto •

Seem like you get an empty array. Maybe you are getting an unexpected response, check chrome network console developers.google.com/web/tools/ch...
Maybe you don't need to data.data and just data. Keep console logging =)

Thread Thread
 
mitchelln11 profile image
mitchelln11 •

So somebody on a Slack channel figured this out for me.

When returning JSX:

<li>{openWeather.weather && openWeather.weather[0].main}</li>
Enter fullscreen mode Exit fullscreen mode

This feels like a bug to me, but it does output the response from the REST API.

I am still getting a warning, which I am unsure why:

    const axiosGet = () => {
        const data = axios.get(`https://api.openweathermap.org/data/2.5/weather?q=London,uk&APPID=api-key`)
        .then(data => setWeather(data.data));
    }
Enter fullscreen mode Exit fullscreen mode

It's saying Line 14:15: 'data' is assigned a value but never used no-unused-vars, although everything works. Aren't I setting the rest endpoint to data, and then using it when running the setWeather method?

Thread Thread
 
suelopoder profile image
Diego Sisto • • Edited

Great that you figure it out!

Keep in mind that you get a first render before you get the data with openWeather as the default value passed in useState.

Maybe you can:

const LocalWeather = () => {
    const [openWeather, setWeather] = useState(null); // null obj instead of empty array

    useEffect(() => {
        axiosGet();
    }, []); //  Run once on load

    const axiosGet = () => {
        axios.get(`https://api.openweathermap.org/data/2.5/weather?q=London,uk&APPID=${process.env.REACT_APP_WEATHER_KEY}`)
        .then(data => setWeather(data.data));
    }

    if (!openWeather) return null; // empty render until we get data

    // if we get here we do have openWeather
    return (
        <ul>
            <li>{openWeather.name}</li>
            <li>{openWeather.cod}</li>
            <li>{openWeather.id}</li>
            <li>{openWeather.timezone}</li>
            <li>{openWeather.dt}</li>
            <li>{openWeather.visibility}</li>
            <li>{openWeather.base}</li>
            {openWeather.weather.map(item => 
              <li key={item.main}>{item.main}</li>
            )}
        </ul>
    );
}

no-unused-vars is because you are doing const data = and never use that data const. Not to be confused with the then data argument. Note I removed it in my example

Thread Thread
 
mitchelln11 profile image
mitchelln11 •

Sweet, works perfectly, i thought that data was the same thing as in the then argument. Works, no errors! Thank you so much for your help

Thread Thread
 
suelopoder profile image
Diego Sisto •

Glad to read that! Keep up the good work!

Thread Thread
 
gustavozapata profile image
Gustavo Zapata •

I just spent hours trying to figure out what the issue was. Thanks to you guys (mitchelln11 and Diego Sisto) I was able to fix it.
My two cents:
Instead of if(!openWeather) return null;
I used {!openWeather && openWeather.weather.map(...) which will render the rest of the app and just ignoring this line.

View full discussion (14 comments)

Read next

abhay_yt_52a8e72b213be229 profile image

React.js Explained: A Comprehensive Guide to Building Modern Web Applications

Abhay Singh Kathayat -

antkales profile image

Counter - A React library for animating numeric transitions

Anton -

amenibensaada profile image

A Beginner’s Guide to Building Dynamic User Interfaces with React

Ameni Ben Saada -

martygo profile image

🛑 Stop Create Hooks in React 🪝🎣

Martins Gouveia -