javascript - how to import json data file and use it in a react component? - Stack Overflow

admin2025-04-10 0

I'm new to react and confused about how to import, export, and render ponents. I have a fakeData.json file located in the same src/ponents folder as the ponent I'm trying to render. Here is the index.html

  <body>
    <div id="root"></div>
  </body>

Here is the index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

Here is the app.js

import './App.css';
import './ponents/WatchlistTable.js';
import 'rsuite/lib/styles/index.less';

  function App() {
    return <WatchlistTable />
  }
export default App;

Here is where I get confused in src/ponents/WatchlistTable.js. It is a rsuite table. I try to import the fakeData.json file, which is located in the same ponents folder, like this: import fakeData from 'fakeData.json'; But it gives error like "Module not found: Can't resolve fakeData.json". So I try another way.

import {fakeData} from 'fakeData.json';

But it gives same error. In the Visual Studio Code editor I notice message like: "there is no fakeData.json in the public folder."

So I make a copy and put it there. Now VSC error disappears but other error remains. The fakeData.json file looks like this:

[
    {
      "id": 1,
      "avartar": "url/128.jpg",
      blah blah blah...
    },
]

So I try another way. I change fakeData.json in ponents folder to fakeData.js and add

const fakeData = [

But same error. So I try:

const fakeData = require('fakeData.js');

But same error. Suggestions?

EDIT: Per Ridik, I now have this in WatchlistTable.js

 import React from 'react';
 import fakeData from 'fakeData';

And I have

export default fakeData;

at the end of the fakeData.js file. But still getting same error: ./src/ponents/WatchlistTable.js

Module not found: Can't resolve 'fakeData' in 'C:\Users\Greg\Projects\react-demos\backtester-rsuite\src\ponents'

  <body>
    <div id="root"></div>
  </body>

Here is the index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

Here is the app.js

import './App.css';
import './ponents/WatchlistTable.js';
import 'rsuite/lib/styles/index.less';

  function App() {
    return <WatchlistTable />
  }
export default App;

import {fakeData} from 'fakeData.json';

But it gives same error. In the Visual Studio Code editor I notice message like: "there is no fakeData.json in the public folder."

So I make a copy and put it there. Now VSC error disappears but other error remains. The fakeData.json file looks like this:

[
    {
      "id": 1,
      "avartar": "url/128.jpg",
      blah blah blah...
    },
]

So I try another way. I change fakeData.json in ponents folder to fakeData.js and add

const fakeData = [

But same error. So I try:

const fakeData = require('fakeData.js');

But same error. Suggestions?

EDIT: Per Ridik, I now have this in WatchlistTable.js

 import React from 'react';
 import fakeData from 'fakeData';

And I have

export default fakeData;

at the end of the fakeData.js file. But still getting same error: ./src/ponents/WatchlistTable.js

Module not found: Can't resolve 'fakeData' in 'C:\Users\Greg\Projects\react-demos\backtester-rsuite\src\ponents'

Share Improve this question edited Mar 11, 2021 at 21:59 asked Mar 11, 2021 at 18:35 user3217883 1,4857 gold badges48 silver badges81 bronze badges

Add a ment |

2 Answers 2

Sorted by: Reset to default 2

You can not directly import your json array from the JSON file in react. To achieve that you must store your JSON array in a variable and then export default your JSON array. By Doing this you can easily import it in your ponent.

FakeData.js

const fakeData = [
    {
      "id": 1,
      "avartar": "url/128.jpg",
      blah blah blah...
    },
]


export default fakeData // you must export it to use in another file.

Then in any ponent use it like

import fakeData from './Destination_of_file/fakeData.js' 

or

Way 2 // reended
import fakeData from './Destination_of_file/fakeData'

In your import statement you have to provide the relative path of the file. Otherwise it looks into public directory in your project. And also instead of using named import syntax use default import syntax. i.e., in your case use below statement to import that json file in your ponent. import jsonFile from "./fakeData.json";

转载请注明原文地址:http://conceptsofalgorithm.com/Algorithm/1744284611a239652.html

javascripthow to import json data file and use it in a react componentStack Overflow

最新回复(0)