Get JSON data in React

Question

I'm making my first project in React so please be gentle.

I'm having trouble putting react data into a component.

Based on this tutorial I setup the component. The source code from video.

class WeatherInfo extends React.Component {

        constructor() {
            super();
            this.state = {
                items: [],
                isLoaded: false
            }
        }
        componentDidMount() {
            fetch(`https://api.openweathermap.org/data/2.5/forecast?q=Austin,USA&appid=583f803dfc6a7f2f96ff9957c330c2b0&units=imperial`)
                .then(results => results.json())
                .then(json => {
                        this.setState({
                            isLoaded: true,
                            items: json                           
                        })
                    });
                }

            render() {

                let {
                    isLoaded,
                    items
                } = this.state;
                if (!isLoaded) {
                    return <div> Loading... </div>
                } else {
                    return ( <div>
                        <ul>
                            {items.map(item => (
                                <li key="{item.list}">
                                    test: {item.list.main}
                                </li>
                            ))}
                        </ul> 
                        </div>
                    );
                }
            }
        }

Feeling lost when connecting the JSON into the ul...or whatever I'd like. My recent error is items.map is not a function. But I have a strong feeling even fixing that error won't get the data from the api that I'd like.

Here's a link to the JSON link where the data is I'd like to use. End project would be selecting only some of the data but I'm confident one I know how to access the data correctly I can do that on my own.

Thank you.

Because your api is returning the object and in there is a property named list on which you can loop through. Here is your data format in json — Mahesh
– Mahesh, Commented Jan 22, 2019 at 2:56
Your code is fine. the problem is your understanding of the data model. Take a close look at the returned object to make sure you understand what it is you are trying to get into the view. — Randy Casburn
– Randy Casburn, Commented Jan 22, 2019 at 2:56

Anil Kumar · Accepted Answer · 2019-01-22 02:56:48Z

2

URL used in tutorial is returning array of records

https://jsonplaceholder.typicode.com/users

[
{
  "id": 1, .....
}
]

While you api end point does not return array of records, it is returning object that's why its failing.

Try this:

                       {items.list.map(item => (
                            <li key="{item}">
                                test: {item.main}
                            </li>
                        ))}

answered Jan 22, 2019 at 2:56

Anil Kumar

2,3192 gold badges18 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

MPortman Over a year ago

Thanks Anil. Error - "TypeError: Cannot read property 'map' of undefined" Trying to find the answer myself but some guidance would be helpful too.

Anil Kumar Over a year ago

console.log(items) and see what's the structure of response at this point to adjust code. You need to map over an array which is list in response.

Bon Andre Opina · Accepted Answer · 2019-01-22 03:39:00Z

1

I got your code working here is a jsFiddle link: https://jsfiddle.net/8q3wbmft/

class WeatherInfo extends React.Component {

        constructor() {
            super();
            this.state = {
                items: [],
                isLoaded: false
            }
        }
        componentDidMount() {
            fetch(`https://api.openweathermap.org/data/2.5/forecast?q=Austin,USA&appid=583f803dfc6a7f2f96ff9957c330c2b0&units=imperial`)
                .then(results => results.json())
                .then(json => {
                        this.setState({
                            isLoaded: true,
                            items: json                           
                        })
                    });
                }

            render() {

                let {
                    isLoaded,
                    items
                } = this.state;
                if (!isLoaded) {
                    return (<div> Loading... </div>)
                } else {
                    return ( <div>
                        <ul>
                            {items.list.map((item, key) => (
                                <li key="{key}">
                                    test: {item.main.temp}
                                </li>
                            ))}
                        </ul> 
                        </div>
                    );
                }
            }
        } 

ReactDOM.render(
  <WeatherInfo name="World" />,
  document.getElementById('container')
);

Basically what is happening is this:

The api is an object:
And this object has an array of list
This list is an array of objects
The key main has the main data temp which you need

If you have questions feel free to ask

answered Jan 22, 2019 at 3:39

Bon Andre Opina

2,2382 gold badges20 silver badges37 bronze badges

2 Comments

MPortman Over a year ago

Thanks. That helped a lot. What if I only wanted certain data and say not all of .temps but, for example, the 2nd temp array? Like list[2].main.temp

Bon Andre Opina Over a year ago

Yes you got it right just add brackets and add this code like this <p>Get 2nd Element {items.list[2].main.temp}</p>… Here is the jsfiddle jsfiddle.net/u8r62gcz/1

Collectives™ on Stack Overflow

Get JSON data in React

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related