Local JSON file is not parsing in React

Question

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;`

Any errors in your console? Also did you check that the data is being returned from that fetch? I can get it to work here with some random api: jsfiddle.net/5vjqabv3/6446 — justDan
– justDan, Commented Sep 13, 2018 at 18:40
@justDan no errors in console and yes i also tried with some random json file from the web and it worked by not with my json file. I'll post a part of my json file(not whole 'cause its too big 100k+ lines). — Manish Pant
– Manish Pant, Commented Sep 14, 2018 at 13:20

devserkan · Accepted Answer · 2018-09-13 19:28:28Z

1

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 Sep 13, 2018 at 19:28

devserkan

17.7k4 gold badges34 silver badges48 bronze badges

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

8 Comments

Manish Pant Over a year ago

In both answers, the page is just showing empty outlined box(due to the css property attached with div). I'll post a part of my json file. and console shows no errors in both answers.

devserkan Over a year ago

@ManishPant, I've seen the JSON. Can you update your question with your current code? Just add the current one, do not replace it. Also, can you try a console.log in your render method? Just below like: render() { console.log( this.state ); return <div className="box">{this.renderMovies()}</div>;

Manish Pant Over a year ago

i console loged it and it returned object with empty movieName array

Manish Pant Over a year ago

i think it's due to size of the json file i have(250k+ lines). i tried using random json file from net and it works fine.

devserkan Over a year ago

Can you share it somehow? You can try to import it directly. Put an import statement top of your file: import movies from "./MovieDatabaseShort.json"; Then change your state like this: this.state = { movies }; Then, remove componentDidMount block and try again.

|

nfranciosi · Accepted Answer · 2018-09-13 16:41:09Z

0

What it looks like you want to do is to save all movies into an array on your state. That would look more like this:

constructor() {
    super()
    this.state = {movies: []}
}
componentWillMount() {
    fetch('./MovieDatabaseShort.json')
    .then(a => a.json())
    .then(b => this.setState({movies: b}));
}

Then in your render function you would loop over your movies and display the title:

render() {
    const { movies } = this.state;
    return (
        <div className='box'>
            {movies.map(movie => <h1 className='heading'>{movie.title}</h1>)}       
        </div>
    );
}

answered Sep 13, 2018 at 16:41

nfranciosi

12 bronze badges

2 Comments

nfranciosi Over a year ago

I don't think you can use fetch() for a local file. You would need to serve that data from a url and then fetch it. Or you could just import that json into your component

nfranciosi Over a year ago

also you probably want to do data fetching in componentDidMount

Julio Ricardo Gutierrez · Accepted Answer · 2021-09-20 13:59:33Z

0

Another way using hook can be the following. In my case I need to take configuration data from a json file

import _data from '../../json/config.json';
export const Mapa = () => {
  
    const [config, setConfig] = useState(null);
    useEffect(()=>{                 
          setConfig(_data );
          
    },[]);
}

answered Sep 20, 2021 at 13:59

Julio Ricardo Gutierrez

11 bronze badge

Collectives™ on Stack Overflow

Local JSON file is not parsing in React

3 Answers 3

8 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

8 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related