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
– marhaupe, Commented Nov 28, 2019 at 16:19
I don't think you need to use fetch to import a local json file. — Trace
– Trace, Commented Nov 28, 2019 at 16:19
Possible duplicate of How to import a json file in ecmascript 6? — messerbill
– messerbill, Commented Nov 28, 2019 at 16:22
I'm using webpack from create-react-app... is there some solution to fix config for importing json file... — Slobodan Draksimovic
– Slobodan Draksimovic, Commented Nov 28, 2019 at 16:22
@messerbill Tried that solution.. and got err Expected a JSON object, array or literal. — Slobodan Draksimovic
– Slobodan Draksimovic, Commented Nov 28, 2019 at 16:24

Saad · Accepted Answer · 2019-11-28 16:24:09Z

1

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

import dataJSON from './data.json'

console.log(dataJSON )

answered Nov 28, 2019 at 16:24

Saad

1,0872 gold badges19 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Slobodan Draksimovic Over a year ago

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...

Saad Over a year ago

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

Slobodan Draksimovic Over a year ago

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?

Saad Over a year ago

yeah that'll work, but it's not what u wanted in first place :)

Slobodan Draksimovic Over a year ago

It's not, but I'm sick of trying to find why doesn't it work as it should... :)

Valentin Micu · Accepted Answer · 2019-11-28 16:37:04Z

1

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';

answered Nov 28, 2019 at 16:37

Valentin Micu

731 silver badge6 bronze badges

Comments

artfulbeest · Accepted Answer · 2019-11-28 16:48:38Z

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, 2019 at 16:48

artfulbeest

1,4932 gold badges17 silver badges24 bronze badges

1 Comment

Slobodan Draksimovic Over a year ago

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 · Accepted Answer · 2019-11-29 22:06:50Z

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, 2019 at 22:06

Slobodan Draksimovic

1071 gold badge4 silver badges13 bronze badges

Comments

Haru · Accepted Answer · 2019-11-28 16:21:49Z

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, 2019 at 16:21

Haru

1459 bronze badges

1 Comment

Slobodan Draksimovic Over a year ago

I have babel instaled by creating an app with react-create-app, so it isn't that...

Collectives™ on Stack Overflow

Fetching data from local json file

5 Answers 5

5 Comments

Comments

1 Comment

Comments

1 Comment

Hot Network Questions