How to load a JSON file in Reactjs

It’s really easy to load data from a JSON file in React. In this post I’m going to show you how you can do that. First, of course, we need a JSON file, you probably already have yours, but I’m using this movies list for this example:

data.json

[{"id": 1,"title": "Child Bride"}, 
{"id": 2, "title": "Last Time I Committed Suicide, The"}, 
{"id": 3, "title": "Jerry Seinfeld: 'I'm Telling You for the Last Time'"}, 
{"id": 4, "title": "Youth Without Youth"}, 
{"id": 5, "title": "Happy Here and Now"}, 
{"id": 6, "title": "Wedding in Blood (Noces rouges, Les)"}, 
{"id": 7, "title": "Vampire in Venice (Nosferatu a Venezia) (Nosferatu in Venice)"}, 
{"id": 8, "title": "Monty Python's The Meaning of Life"}, 
{"id": 9, "title": "Awakening, The"}, 
{"id": 10, "title": "Trip, The"}]

Now we have to place this file somewhere inside our project folder, it doesn’t necessarily need to be on the project, but it must be somewhere accessible via Http.

Once you have the path to your file you can load it this way:

import React, { Component } from 'react';
import data from './data.json';
 
class App extends Component {
  render() {
    return (
        <ul>
        {
          data.map(function(movie){
            return <li>{movie.id} - {movie.title}</li>;
          })
        }
        </ul>
    );
  }
}
 
export default App;

Note that all I had to do was to import the file in line 2, then the data was already ready for me to use on the data variable. Lastly, to show you how to use this variable I’ve made this component iterate over the dataset and display it on a list.

Easy right! If you have any doubts please let me know in the comments.

Recommended for you

Angular2: How to Sort a JSON Dataset by Field To be able to sort an array we don't need anything specific from angular2, it can be accomplished just by using regular javascript, more specifically, we have to use the function sort() from the Array object, let's see an example: someArray.sort(function(a, b){ if ( a.someField < b.someFi...
Tutorial: Sorting and Filtering a ReactJS Datatable ReactJS Datatable with Sort and Filter A few months ago I've made this post about how to create a reactjs datatable using the FixedDataTable module, I didn't cover much, I just gave a simple example explaining how to populate the table with JSON data. Today we're going a little further, continui...
Getting Started with Facebook’s React and Flux ReactJS Homepage React and Flux are two of the most promising technologies of the present days, both are constantly showing up on trending technologies lists, quickly gaining market and becoming popular among developers. The first one defines itself as an open source javascript library for build...
How to load a JSON file in NodeJS This is another short, but useful tutorial for beginners. In this post I'm going to show how to load the following JSON dataset with NodeJS: dataset.json We don't have to create an entire project with express to read this file, a simple js file will do. node-json.js var fs = requi...

4 comments on “How to load a JSON file in Reactjs

  1. freddy

    Hi,
    unfortunately it didn’t work :-)
    Failed to compile.

    ./src/App.js
    Line 19: ‘movie’ is not defined no-undef
    Line 19: ‘movie’ is not defined no-undef

    Search for the keywords to learn more about each error.

    think you should change the json format data

Leave a Reply

Your email address will not be published. Required fields are marked *

Obs: Use the tag <pre lang="LANGUAGE"> to include code blocks to your comment.
Example: <pre lang="javascript"> console.log('Test'); </pre>