Undefined Nested Object in REST API with React Hooks?

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.

Comments

[Diego Sisto]

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

[mitchelln11]

comes back undefined.

[Diego Sisto]

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

[mitchelln11]

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

[Diego Sisto]

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

[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.

[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!

[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.

[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 =)

[mitchelln11]

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

When returning JSX:

<li>{openWeather.weather && openWeather.weather[0].main}</li>

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

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?

[Diego Sisto]

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

[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

[Diego Sisto]

Glad to read that! Keep up the good work!

[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.