Fetching data from local json file

Question

I have a problem with the module not being found in React import. Here is my API from the file:

[   
    {
        "poolNumber": "1",
        "sender": "Damir",
        "notRoutedReason": "NumberDoesntExist",
        "sentDateTime": "2019-08-13T08:01:48.1535075Z",
        "requestedDeliveryReportMaskText": "Submitted",
        "deliveryReportReceivedDateTime": "2019-08-13T08:01:48.1535075Z",
        "isUnicode": "FALSE",
        "messageUUID": "4889e632-a314-45e2-89fd-35b07b4f9ff2"
    },
    {
        "poolNumber": "1",
        "sender": "Damir",
        "notRoutedReason": "NumberDoesntExist",
        "sentDateTime": "2019-08-13T08:01:46.3254032Z",
        "requestedDeliveryReportMaskText": "Submitted",
        "deliveryReportReceivedDateTime": "2019-08-13T08:01:46.3254032Z",
        "isUnicode": "FALSE",
        "messageUUID": "7f48626f-7dfe-4772-99e6-3a4c1df15e0e"
    }
]

And then I'm trying to call it under imports so I can log(data)..

import React from 'react'

import dataJSON from './data.json'
    const getData = async () => {
        const response = await fetch(dataJSON)
        const data = await response;
        return getData
    }

But I can't fetch data coz it isn't getting module I need. How can I fix this?

What bundler are you using? For example, create-react-app uses webpack + some configurations that should allow you to easily import json — marhaupe, Nov 28 '19 at 16:19
I don't think you need to use fetch to import a local json file. — html_programmer, Nov 28 '19 at 16:19
Possible duplicate of [How to import a json file in ecmascript 6?](https://stackoverflow.com/questions/34944099/how-to-import-a-json-file-in-ecmascript-6) — messerbill, Nov 28 '19 at 16:22
I'm using webpack from create-react-app... is there some solution to fix config for importing json file... — Slobodan Draksimovic, Nov 28 '19 at 16:22
@messerbill Tried that solution.. and got err Expected a JSON object, array or literal. — Slobodan Draksimovic, Nov 28 '19 at 16:24

score 1 · Answer 1 · answered Nov 28 '19 at 16:24

1

If you're using Create React App this should work fine :

import dataJSON from './data.json'

console.log(dataJSON )

answered Nov 28 '19 at 16:24

Saad

1,047
2
19
32

Doesn't work... It gives me error saying that it can't find module... But it works If I declare file with js extension and export default dataJSON... – Slobodan Draksimovic Nov 28 '19 at 16:32
That's strange, usually installing 'json-loader' module solves this, but CRA already has that, maybe you're using an old version of CRA, try `npm install --save-dev json-loader` – Saad Nov 28 '19 at 16:42
Did it already... But have the same error... I will do It as a js file, and just export default let dataJSON and stringify it in component... Is that a good solution? – Slobodan Draksimovic Nov 28 '19 at 16:48
yeah that'll work, but it's not what u wanted in first place :) – Saad Nov 28 '19 at 17:00
It's not, but I'm sick of trying to find why doesn't it work as it should... :) – Slobodan Draksimovic Nov 28 '19 at 17:03

score 1 · Answer 2 · answered Nov 28 '19 at 16:37

You could use axios / Promise based HTTP client for the browser and node.js to handle the request in the React componentDidMount life-cycle method.

https://github.com/axios/axios

But I agree that in CreatReactApp is easier to just:

import info from './data.json';

score 1 · Answer 3 · answered Nov 28 '19 at 16:48

1

If you are using create-react-app, just import

import dataJson from './dataJson.json';

Please see my sandbox import json in react app

answered Nov 28 '19 at 16:48

artfulbeest

1,395
2
16
22

It doesn't see JSON as a module... I've tried that in the first place, knowing what and how should it work, but it doesn't... – Slobodan Draksimovic Nov 28 '19 at 16:59

score 1 · Accepted Answer · answered Nov 29 '19 at 22:06

1

Tnx all for trying to help me, but my solution was putting .json file in public folder, and importing it in App.js... that Way engine didn't trow error and I resolved it with async/await.

answered Nov 29 '19 at 22:06

Slobodan Draksimovic

101
2
12

score 0 · Answer 5 · answered Nov 28 '19 at 16:21

0

For use import and export statements, you have to use es6, and for this, babal is required.

Maybe you have to add babel-plugin-import to your project: read if you have and how to install and configure here here)

answered Nov 28 '19 at 16:21

Zinho

135
9

I have babel instaled by creating an app with react-create-app, so it isn't that... – Slobodan Draksimovic Nov 29 '19 at 22:04

Fetching data from local json file

5 Answers5