Import static JSON data in React

Question

I am trying to load static JSON data to my react app. But, it wan't allow me to load data.

I am using webpack version 4.26.1

It shows me following error:

SyntaxError: src/data/movieData.json: Unexpected token, expected ; (2:10)

  1 | {
  2 |     "data": [
    |           ^
  3 |         {
  4 |           "id": 1,
  5 |           "title": "Freed",

My Code:

data/jsonResponse.json

{
    "data": [
        {
          "id": 1,
          "title": "Freed"
    },
    {
          "id": 2,
          "title": "Fifty"
    }
    ]
}

main.js

import React, { Component } from 'react';
import Content from './Content';
import  jsonResponse from './data/jsonResponse.json';

class Main extends Component {
    render() {
        return (
            <div className="main">
                <Content item={ jsonResponse } />
            </div>
        );
    }
}

export default Main;

Content.js

import React from 'react';

  const Content = () => {
    const movies = this.props.item.data;
      return (
        movies.map(movie => {
            return (
                <span >{movie.title}</span>
            );
         })
        )
}

export default Content;

Edited:

If i use js instead of JSON like:

const movies_data = {
   "data": [
            {
              "id": 1,
              "title": "Freed"
        },
        {
              "id": 2,
              "title": "Fifty"
        }
        ]
    }
export default movies_data;

and in Main.js file

import  jsonResponse from './data/movieData';

Then in browser it shows following error.

Cannot read property 'props' of undefined

The `import` expects a JavaScript source file, and JSON is not that. — Pointy, Dec 04 '18 at 15:07
@kinduser the open `{` in the JSON file is interpreted as the start of a JavaScript block statement. JSON source is simply not JavaScript by itself. — Pointy, Dec 04 '18 at 15:12
Please the answer here: https://stackoverflow.com/questions/33650399/es6-modules-implementation-how-to-load-a-json-file/33650470#33650470 — Jason Lock, Dec 04 '18 at 15:12
@ jasonlock Doesn't apply. json-loader is loaded by default since >=2.2 — Mehrdad Shokri, Dec 04 '18 at 15:13
@MehiShokri Yeah. Thanks for answer. With Js now working as per Bartek Fryzowicz and you answer so, i up voted both. But, checking with JSON as per your answer. — ketan, Dec 04 '18 at 15:25

score 6 · Accepted Answer · answered Dec 04 '18 at 15:16

There are 2 workarounds for loading json files in a js file.

Rename your json file to .js extension and export default your json from there.
Since json-loader is loaded by default on webpack >= v2.0.0 there's no need to change your webpack configs.
But you need to load your json file as json!./data/jsonResponse.json (pay attention to json!)

EDIT:

Cannot read property 'props' of undefined

The reason you're getting this error is because you're trying to access this on a functional component!

score 2 · Answer 2 · answered Dec 04 '18 at 15:15

Answer regarding edited question and Cannot read property 'props' of undefined error

You can't access this in functional components. props are passed as argument to functional components so please try this (Content.js file):

import React from 'react';

  const Content = (props) => {
    const movies = props.item.data;
      return (
        movies.map(movie => {
            return (
                <span >{movie.title}</span>
            );
         })
        )
}

export default Content;

score -1 · Answer 3 · answered Dec 04 '18 at 15:13

-1

You have to add a JSON loader to import json files.

answered Dec 04 '18 at 15:13

ehmprah

154
1
3

1

json-loader is loaded by default – Mehrdad Shokri Dec 04 '18 at 15:14
Only since version 2 it is :-) – ehmprah Dec 04 '18 at 15:15
He mentioned it's 4.7 – Mehrdad Shokri Dec 04 '18 at 15:17

score -1 · Answer 4 · answered Dec 04 '18 at 15:17

-1

You need to check if in your Webpack config if exist an loader to JSON.

I recommend to use this loader. https://www.npmjs.com/package/json-loader

answered Dec 04 '18 at 15:17

Leonardo Nascimento

1

I am using webpack version 4.26.1 – ketan Dec 04 '18 at 15:20
Please provide concrete answer with code snippets. pointing to references per se Does not help. Also, he mentioned he's webpack version is >=2.0.0 so your answer basically does nothing. – Mehrdad Shokri Dec 04 '18 at 17:14

Import static JSON data in React

4 Answers4