How to export an array of objects in a JSON file and then import using es6

javascript json ecmascript-6 es6-modules

28,649

Since you're storing as JSON extension you should not use export const data = ...

You should directly store the data

xyz.json

[
      {
        "userId": 1,
        "id": 1,
        "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
        "body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
      }
    ]

JSON

For demo you can see this

Or you can set extension to .js

const export data = ...some data

at required place

import {data} from '../filepath'

28,649

Author by

j obe

Updated on February 05, 2020

Comments

j obe about 4 years
I have an array of objects in a json file. I'm trying to import this file into another file so I can reference the data in a simple react project.

I've tried various combinations of export default and named exports but the JSON file is always complaining when I save it. Here is what I am trying to achieve:

(File1.json)
```
    [
      {
        "userId": 1,
        "id": 1,
        "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
        "body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
      }
    ]
```
File2.js
```
import data from '.\file1.json'

console.log(data.id);
```
The issue I'm having is that I see no errors in my JS file but the data.id value isn't being displayed. However in my JSON file, I am having problems exporting it to use.

Question: How to import ".json" file (not ".js") with objects file using es6?

Update I've managed to make it work in the create-react-app environment, I left the json file as an array of objects, then in the js file I used "import xyx from './xyz';"

This worked for me, this answer isn't mentioned in the duplicate marked post so I think it should have it's own answer - hopefully this helps someone else.
j obe about 5 years

How is then imported to be used in another file? I tried this method also but none of the data then appears in the other file? How would the import statement look if both files are in the same folder?
j obe about 5 years

@guest271314 I will try that but a developer friend of mine mentioned not having to change the file extension to make it work - it does work the way you're suggesting but I'm trying to see if the JSON extension method will work.
guest271314 about 5 years

@jobe Failed to load module script: The server responded with a non-JavaScript MIME type of "application/json". Strict MIME type checking is enforced for module scripts per HTML spec. Did your "developer friend" share working code with you to prove their claim?
j obe about 5 years

@guest271314 No he didn't it was meant to be my learning exercise to make it work. He did show me a working version with a JSON file but not in detail.
Code Maniac about 5 years

@jobe you can see here repl.it/@VivekJain1/ImportantFriendlyWebmaster
guest271314 about 5 years

@KamilKiełczewski How do you propose to include export in a valid JSON file?
j obe about 5 years

Is it possible to do this in es6 using modules and import statements? I thought they can be used instead of require statements. This is the exact problem though.
Code Maniac about 5 years

@jobe yes it can be all we need is to setup transpiler. i am not familiar with REPL but wait let me try to do it
j obe about 5 years

ok - I am reading some other posts too.
j obe about 5 years

@guest271314 Thanks for your answer, I'm trying to find a way to do it with a JSON file extension.
guest271314 about 5 years

@jobe Why does the extension need to be .json? As pointed out above, you can use <link rel="import"> or fetch(). Or use non-standard third-party code (as suggested in the linked question). Valid JSON cannot contain an export statement preceding valid JSON, which would result in invalid JSON. Refer to the HTML Standard html.spec.whatwg.org/multipage/…
guest271314 about 5 years

@jobe See also Is there a way to know if a link/script is still pending or has it failed
j obe about 5 years

Any luck Code Maniac?
guest271314 about 5 years

@jobe The requirement is currently not possible using JavaScript shipped with the browser for the reasons stated above. First there is the issue of an export statement in valid JSON which would render the JSON invalid. Have you read the linked specification?
j obe about 5 years

It might have got missed but I mentioned in another comment I am doing this in create-react-app which has webpack etc all bundled up. Some posts I have read suggest this is possible.
guest271314 about 5 years

@jobe According to answers at the linked question the requirement apparently is possible using non-standard, third-party code which transforms or modifies the request/response - not standard, non-third-party default methods shipped with the browser. Have not tried webpack or react. The answer is based on standard HTML and JavaScript shipped with the browser - without using any third-party, non-standard code or libraries.
guest271314 about 5 years

@jobe Note HTML Imports are deprecated for Chromium/Chrome 73 chromestatus.com/features/5144752345317376