Menu
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:
455
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": {
}
}
]
}
OR
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.
26
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
