Load external JSON in React

Question

So I quite new to this. I want to load a external json file into react, and then use it.

The problem apparently is that the json hasn't been yet loaded, so I get errors. Like Cannot read property 'map' of undefined etc. The console.log give:

1
3
Uncaught TypeError: Cannot read property 'map' of undefined

So I've read this has to do with asynchronous things. But I can't find any example on how to fix it. Or how to make it work.

I would really appreciate it to see a small example like this, to make it work.

Later on I want to make it possible to filter the json with <input type=text etc> with some kind of dynamic search. But first things first. So can someone help me out?

This is my simple file:

import React, { Component } from 'react';
import './App.css';

class App extends Component {

  constructor(){
    super();
    this.state = {
      data: []
    };
    console.log('1');
  };

  componentDidMount() {
    fetch("http://asite.com/file.json")
    .then( (response) => {
      return response.json() })
    .then( (json) => {
      this.setState({data: json});
      console.log('2');
    })
  };

  render() {
    console.log("3");
    return(
      <div className="Employee">
      {
        this.state.data.employees.map(function(employee) {
          return (
            <div>
            <h1> {employee.name} </h1>
            </div>
          )
        })
      }
      </div>
    )
  }
}

export default App;

Austin Greco · Accepted Answer · 2018-03-20 21:53:32Z

1

Since you have this.state.data.employees, I would assume you want to shape the initial state like this:

constructor(){
  super();
  this.state = {
    data: {
      employees: []
    }
  };
};

answered Mar 20, 2018 at 21:53

Austin Greco

33.6k6 gold badges60 silver badges61 bronze badges

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

Comments

J Livengood · Accepted Answer · 2018-03-20 21:54:51Z

You can either choose to save to the state another variable which is flipped when you know you've loaded the data, or just check to ensure the data exists before trying to map it.

The latter could be done like below:

 <div className="Employee">
  { this.state.data.employees &&
    this.state.data.employees.map(function(employee) {
      return (
        <div>
        <h1> {employee.name} </h1>
        </div>
      )
    })
  }
  </div>

Or you could adjust the initial state to include an empty (but initialized) version of the return such as:

this.state = {
  data: { employees: [] }
};

Checking to ensure the state contains the data field you're mapping is much safer though incase the return ever doesn't include the field.

Collectives™ on Stack Overflow

Load external JSON in React

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related