How to get an item from an array in JSON in ReactJS?

Question

I am trying to get an item "icon" from "weather" form following JSON

{
  "coord": {
    "lon": 14.33,
    "lat": 49.94
  },
  "weather": [{
    "id": 800,
    "main": "Clear",
    "description": "clear sky",
    "icon": "01d"
  }]
}

I can't figure out how to exctract an item which is in array through render method. My code is:

class Weather extends React.Component {
  constructor() {
    super();
    this.state = {
      'items': []
    }
  }

  componentDidMount() {
    this.getItems();
  }

  getItems() {
    fetch('http://api.openweathermap.org/data/2.5/weather?lat=49.9415967&lon=14.3316786&appid=ed62e370682cc9e4144620905eff37e4')
    .then(results => results.json())
    .then(results => this.setState ({'items': results}));
  }

  render() {
    return (
        <div>
            <h1>here should be an icon..</h1>
            {this.state.items.weather.map(function(weather, index) {
                return <h3 key={index}>{weather.icon}</h3>
            })}
        </div>
    );
  }
}

I actually used this question here: Get access to array in JSON by ReactJS ...which got me this far, but still can't make it working...

As @Tholle pointed out, either you should add weather key inside items or if you are only concerned about weather then, you can have the state as with items key as an array and while setting state, simply do this this.setState({ 'items': results.weather }) — Abhishek Prakash
– Abhishek Prakash, Commented Jul 2, 2018 at 10:28

Tholle · Accepted Answer · 2018-07-02 10:17:49Z

Your weather array is not set until your fetch request is complete, so this.state.items.weather.map in your render method will result in an error.

You could give weather an empty array as default value.

class Weather extends React.Component {
  constructor() {
    super();
    this.state = {
      items: {
        weather: []
      }
    };
  }

  componentDidMount() {
    this.getItems();
  }

  getItems() {
    fetch(
      "http://api.openweathermap.org/data/2.5/weather?lat=49.9415967&lon=14.3316786&appid=ed62e370682cc9e4144620905eff37e4"
    )
      .then(results => results.json())
      .then(results => this.setState({ items: results }));
  }

  render() {
    return (
      <div>
        <h1>here should be an icon..</h1>
        {this.state.items.weather.map(function(weather, index) {
          return <h3 key={index}>{weather.icon}</h3>;
        })}
      </div>
    );
  }
}

Rahil Ahmad · Accepted Answer · 2018-07-02 10:28:42Z

copy paste this example in codesandbox.io .you were initializing the items in constructor as array(where as fetch gave you an object) and for the initial render, items.weather was undefined and in render method you were trying to access map of undefined which was causing the error. (I have changed the url to https to run it in codesandbox)

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      items: {}
    };
  }

  componentDidMount() {
    this.getItems();
  }

  getItems() {
    fetch(
      "https://api.openweathermap.org/data/2.5/weather?lat=49.9415967&lon=14.3316786&appid=ed62e370682cc9e4144620905eff37e4"
    )
      .then(results => results.json())
      .then(results => this.setState({ items: results }));
  }

  render() {
    return (
      <div>
        <h1>here should be an icon..</h1>
        {this.state.items.weather &&
          this.state.items.weather.map(function(weather, index) {
            return <h3 key={index}>{weather.icon}</h3>;
          })}
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Collectives™ on Stack Overflow

How to get an item from an array in JSON in ReactJS?

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related