CODEWITHSUNDEEP
javascriptjsonreactjsasynchronousfetch-api
Slobodan Draksimovic
Slobodan Draksimovic

Reputation: 107

Fetching data from local json file

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?

Upvotes: 1

Views: 8688

Answers (5)

Slobodan Draksimovic
Slobodan Draksimovic

Reputation: 107

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.

Upvotes: 1

artfulbeest
artfulbeest

Reputation: 1483

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

import dataJson from './dataJson.json';

Please see my sandbox import json in react app

Upvotes: 1

Valentin Micu
Valentin Micu

Reputation: 73

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

Upvotes: 1

Saad
Saad

Reputation: 1087

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

import dataJSON from './data.json'

console.log(dataJSON )

Upvotes: 1

Haru
Haru

Reputation: 145

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)

Upvotes: 0

Related Questions