javascript - Reading data from JSON file using react

I am really new to using react, I am using IntelliJ as my IDE.

I am trying to show the contents of a JSON data file on my website but I am getting errors saying that I have created an illegal import deceleration.

import PostData from "./JSONData.js";

My class to load the infgormation in a class is below

class Invoice extends React.Component
{
    render()
    {
        return (
                <div className ="container">
                    <h2>Allstate NI Graduate Application</h2>
                    <h2>Invoice</h2>

                    {PostData.map((postDetail, index)=>{
                    return <h1>{postDetail.code}</h1>
                    })}


                </div>
        );
    }
}

This is my main HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Gerry Byrne and David Wilson - ReactJS Tutorials</title>
  <img src="../Drawable/carImage.png" id="carImg">

                                              <!--Bootstap CSS-->
  <link rel="stylesheet" href=".1.0/css/bootstrap.min.css"
        integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4"
        crossorigin="anonymous">

                          <!-- Tells the file to get the react.js file from a CDN.-->
  <script src=".4.0/react.js"></script>
                            <!--Tells the file to get the react-dom.js file from a CDN-->
  <script src=".4.0/react-dom.js"></script>
  <!--The above two scripts used to be one but have since been seperated / ReactDom is only used to render ReactDOM.render()-->

  <!---->
  <script src=".13.3/JSXTransformer.js"></script>
                                        <!--Tells the file to get the compiler file from a CDN-->
  <script src=".8.24/browser.min.js"></script>
  <!---->
  <script src=".5.2/ReactRouter.min.js"></script>
  <link rel="stylesheet" href="../css/style.css" />

  <!-- Latest compiled and minified CSS Bootstrap-->
  <link rel="stylesheet" href=".3.7/css/bootstrap.min.css"
        integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"></link>
</head>
<body>
  <div id="contentgoeshere"></div>
  <br/>

  <script type="text/jsx" src = "../JavaScript/ReactJSV3.js"></script>

</body>
</html>

I am not sure what I need to add to allow my project to import these files. This is the error I am getting:

I am really new to using react, I am using IntelliJ as my IDE.

I am trying to show the contents of a JSON data file on my website but I am getting errors saying that I have created an illegal import deceleration.

import PostData from "./JSONData.js";

My class to load the infgormation in a class is below

class Invoice extends React.Component
{
    render()
    {
        return (
                <div className ="container">
                    <h2>Allstate NI Graduate Application</h2>
                    <h2>Invoice</h2>

                    {PostData.map((postDetail, index)=>{
                    return <h1>{postDetail.code}</h1>
                    })}


                </div>
        );
    }
}

This is my main HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Gerry Byrne and David Wilson - ReactJS Tutorials</title>
  <img src="../Drawable/carImage.png" id="carImg">

                                              <!--Bootstap CSS-->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"
        integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4"
        crossorigin="anonymous">

                          <!-- Tells the file to get the react.js file from a CDN.-->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.0/react.js"></script>
                            <!--Tells the file to get the react-dom.js file from a CDN-->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.0/react-dom.js"></script>
  <!--The above two scripts used to be one but have since been seperated / ReactDom is only used to render ReactDOM.render()-->

  <!---->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script>
                                        <!--Tells the file to get the compiler file from a CDN-->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js"></script>
  <!---->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react-router/2.5.2/ReactRouter.min.js"></script>
  <link rel="stylesheet" href="../css/style.css" />

  <!-- Latest compiled and minified CSS Bootstrap-->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
        integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"></link>
</head>
<body>
  <div id="contentgoeshere"></div>
  <br/>

  <script type="text/jsx" src = "../JavaScript/ReactJSV3.js"></script>

</body>
</html>

I am not sure what I need to add to allow my project to import these files. This is the error I am getting:

Share Improve this question edited Oct 30, 2018 at 10:04 T.J. Crowder 1.1m199 gold badges2k silver badges1.9k bronze badges asked Oct 30, 2018 at 10:01 James Ferry 1371 gold badge3 silver badges12 bronze badges

1 Please include error messages as text, not as a picture of text. Why: meta.stackoverflow.com/q/285551/157247 – T.J. Crowder Commented Oct 30, 2018 at 10:05
You say you are really new to React. Have you read the Getting started official guide? – c-chavez Commented Oct 30, 2018 at 12:13
Could you please post your JSONData.js file? – c-chavez Commented Oct 30, 2018 at 12:13

Add a comment |

4 Answers 4

Sorted by: Reset to default 10

Its very simple. You can simply import .json file

import myJson from '../assets/my_json.json';

and use myJson directly

my_json.json

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {

      }
    }
  ]
}

You can export the object(if want to use .js file) and import in another module.

const myJson = {
      "type": "FeatureCollection",
      "features": [
        {
          "type": "Feature",
          "properties": {

          }
        }
      ]
    }

export default myJson;

import statement

import myJson from '../assets/my_json.js';

This:

import PostData from "./JSONData.js";

is an import declaration importing the default export of a module. A JSON data file is not a JavaScript module.

To read the data file, use whatever mechanism is available on your platform (for instance, fetch on the web).

I should note that if you want to make the JSON data file a JavaScript module, you probably only have to make a very small change to it. For instance, if you have:

{
    "answer": 42,
    "question": "Life, the Universe, and Everything!"
}

then adding "export default" at the beginning and ; at the end makes it a JavaScript module exporting that object as its default export:

export default {
    "answer": 42,
    "question": "Life, the Universe, and Everything!"
};

E.g., export default /*...any valid JSON here...*/; is a valid module with a default export.

If you are using typescript, you can declare a module and consume it as object like so

declare module "*.json" {
  const value: any;
  export default value;
}

//consume it then like this

import * as de_trans from './translations/de.json';

You can not use json like that. You need to fetch your data. If you want fake data, you can check out json-server.

The second way to handle your data: Put your data into a .js file and export it.

var dummy_data = {    
    name: 'John Smith',
    imgURL: 'http://lorempixel.com/100/100/',
    hobbyList: ['coding', 'writing', 'skiing']
}

export default dummy_data;

Then import the json.js into your app.js and handle it.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Reading data from JSON file using react - Stack Overflow

4 Answers 4

与本文相关的文章

评论列表(0)