REACT fetch properties from nested JSON

Question

I am using react to render data from properties in a json that is nested. I don't have a problem rendering the properties that are not nested such as 'name', and 'id', but when it comes to grabbing a nested prop such as place:location{...} etc, it says "TypeError: Cannot read property 'location' of undefined"

My json format looks as follows:

data = [ {
  "end_time": "2015-03-28T21:00:00-0700",
  "name": "Brkn Intl. Bay Area Season 2!",
  "place": {
    "name": "MVMNT Studio",
    "location": {
      "city": "Berkeley",
      "country": "United States",
      "latitude": 37.85381,
      "longitude": -122.27875,
      "state": "CA",
      "street": "2973 Sacramento St",
      "zip": "94702"
    },
    "id": "459771574082879"
  },
  "start_time": "2015-03-28T15:00:00-0700" }, ...]

This is my react code:

  class ResultBox extends Component {
    constructor(props){
    super(props);
    this.state = {
    posts: []
     };
  }
   componentDidMount() {
   axios.get('http://localhost:3001/api/events')
     .then(res => {
     let posts = res.data.map(obj => obj);
     this.setState({posts});
     console.log(posts);
    });

 }
  render() {
   return (
      this.state.posts.map(function(events){
        return <div className='result_box'>

       <p>{events.name}</p>
       <p>{events.place.location.city}</p> <----- This give me error!!!
       </div>
     })

  );
 }
}

Any help would be appreciated!!!!

Could you console.log(events) before returning the new div and check whether it has events or not? — Hemerson Carlin
– Hemerson Carlin, Commented Oct 30, 2017 at 7:09
One of your place should be undefined in the json. You can print all the json and check it. — Panther
– Panther, Commented Oct 30, 2017 at 7:10
Seems like you have problem with data, not with code. Add validation step and you will see where the problem comes from — Teivaz
– Teivaz, Commented Oct 30, 2017 at 7:11
When I console.log(events) it returns each dictionary in the list. So do you guys think its because some of my data does not have a place/location prop? — kpo1
– kpo1, Commented Oct 30, 2017 at 7:13
Yes, it seem like some of the data does not contain a place prop. — kpo1
– kpo1, Commented Oct 30, 2017 at 7:15

Hemerson Carlin · Accepted Answer · 2017-10-30 07:32:14Z

3

It looks like not all events have property place defined. You can either warn about it on every component or just ignore and prevent undefined values to be rendered:

this.state.posts.map(events =>
  <div key={events.id} className='result_box'>
    <p>{events.name}</p>
    {events.place && <p>{events.place.location.city}</p>}
  </div>
)

Lodash's get method also can help you with this:

<p>{get(events, 'place.location.city', '')}</p>

edited Oct 30, 2017 at 7:32

answered Oct 30, 2017 at 7:26

Hemerson Carlin

7,4241 gold badge29 silver badges38 bronze badges

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

1 Comment

Hemerson Carlin Over a year ago

@kpo1 Don't forget to add key prop to each div within map. This is really important so React knows which components have been added, removed or even modified :)

Collectives™ on Stack Overflow

REACT fetch properties from nested JSON

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related