Local JSON file is not parsing in React

Issue

I have a large JSON file which has around 5000 entries and when I parse it using fetch(), it doesn’t show up in browser.
Here’s my code:

import React from 'react';
import './Box.css';

class Box extends React.Component {
	constructor() {
		super()
		this.state = {movieName: []}
	}
	componentDidMount() {
		fetch('./MovieDatabaseShort.json')
		.then(a => a.json())
		.then(movieName => this.setState({movieName}));
	}
	renderMovies() {
		const { movieName } = this.state;
		return movieName.map(a => {
			<h1 key={ a.id } className='heading'>{a.title}</h1>;
		});
	}
	render() {
		return <div className="box">{this.renderMovies()}</div>;
	}
}
export default Box;

I just want to put all the movies titles.

import React from 'react';
import './Box.css';

class Box extends React.Component {
	constructor() {
		super()
		this.state = {movieName: []}
	}
	componentDidMount() {
		fetch('https://support.oneskyapp.com/hc/en-us/article_attachments/202761627/example_1.json')
		.then(a => a.json())
		.then(movieName => this.setState({movieName: movieName.color}));
	}
	render() {
		console.log( this.state );
		return <div className="box">{this.state.movieName}</div>;
	}
}
export default Box;

EDIT– In second code, I just copied random json file from net and it works fine. I think its’s due to size of the json file I have. It’s 250k+ lines.

Update– This works. I think problem is due to fetch()

import React from 'react';
import './Box.css';
import a from './MovieDatabaseShort.json'
class Box extends React.Component {
    constructor() {
        super()
        this.state = {movieName: []}
    }
    componentDidMount() {
        this.setState({movieName: a});
    }
    renderBox() {
        const { movieName } = this.state;
        return movieName.map(k => {
            return <h1 className='heading'>{k.title}</h1>;
        })
    }
    render() {
        return (
            <div className='box'>{this.renderBox()}</div>
        );
    }
}
export default Box;`

Solution

First of all, there are some places you should change in your code.

• You should keep an array property in your state for all movies: movies: []
• You should map this state value, then render some JSX.
• Use componentDidMount instead of componentWillMount since it will be deprecated in a future release.

Here is the example code:

class Box extends React.Component {
  constructor() {
    super();
    this.state = { movies: [] };
  }

  componentDidMount() {
    fetch("./MovieDatabaseShort.json")
      .then(res => res.json())
      .then(movies => this.setState({ movies }));
  }

  renderMovies() {
    const { movies } = this.state;
    return movies.map(movie => (
      <h1 key={movie.title} className="heading">
        {movie.title}
      </h1>
    ));
  }

  render() {
    return <div className="box">{this.renderMovies()}</div>;
  }
}

If you still don’t see anything maybe fetch would the problem here. Then, try this:

class Box extends React.Component {
  constructor() {
    super();
    this.state = { movies: [] };
  }

  componentDidMount() {
    import("./MovieDatabaseShort.json").then(movies =>
      this.setState({ movies })
    );
  }

  renderMovies() {
    const { movies } = this.state;
    return movies.map(movie => (
      <h1 key={movie.title} className="heading">
        {movie.title}
      </h1>
    ));
  }

  render() {
    return <div className="box">{this.renderMovies()}</div>;
  }
}

Again, if nothing is shown up please share you JSON file with us as well as check your console if there is any error.

Answered By – devserkan

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0