Fetch local JSON file from public folder ReactJS

Question

I have a problem since two days; I want read a local JSON from my public folder on my React application created with react-app.

This is my project structure:

public
- data
  - mato.json (my .JSON file)
src
- components
  - App.js

Why I put my file in public folder? If I build my project with file in src folder, my file will be include in the generated main.js by the command yarn build.

I want modify my json file without always rebuild my app.

So I can't use code like:

import Data from './mato.json'

…or:

export default { 'mydata' : 'content of mato.json'}
import data from 'mydata';

I tried to fetch my .json file but "file scheme" isn't friend with fetch() & chrome..

(Chrome error: “index.js:6 Fetch API cannot load file:///D:/projects/data/mato.json. URL scheme "file" is not supported.”)

This is my code for fetch:

fetch(`${process.env.PUBLIC_URL}/data/mato.json`)
.then((r) => r.json())
.then((data) =>{
    ReactDOM.render(<App appData={JSON.stringify(data)}/>, document.getElementById('root'));
})

It's only works with Firefox. I also tried mode: 'cors' does not better.

And of course I don't have any server — it's a local project — so if someone knows how I can read my JSON file locally I will much appreciate.

Jason Roman · Accepted Answer · 2018-05-19 22:35:14Z

50

I think your fetch argument is wrong. It should be

fetch('data/mato.json')

edited May 19, 2018 at 22:35

Jason Roman

8,30610 gold badges37 silver badges44 bronze badges

answered May 19, 2018 at 22:09

Quentin

6569 silver badges11 bronze badges

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

Comments

Blessing · Accepted Answer · 2020-12-19 07:09:32Z

11

You also need to pass in some headers indicating the Content-Type and Accept as application/json to tell your client that you are trying to access and accept some JSON resource from a server.

  const getData=()=>{
    fetch('data/mato.json'
    ,{
      headers : { 
        'Content-Type': 'application/json',
        'Accept': 'application/json'
       }
    }
    )
      .then(function(response){
        console.log(response)
        return response.json();
      })
      .then(function(myJson) {
        console.log(myJson);
      });
  }
  useEffect(()=>{
    getData()
  },[])

answered Dec 19, 2020 at 7:09

Blessing

2,76018 silver badges25 bronze badges

Comments

Lex Soft · Accepted Answer · 2019-01-19 07:26:25Z

5

As long as data files are placed in public folder, it should work in Chrome also as in my project. So, fetch('data/mato.json') is enough for it.

answered Jan 19, 2019 at 7:26

Lex Soft

2,5162 gold badges15 silver badges13 bronze badges

1 Comment

Imran Rafiq Rather Over a year ago

Thank You @Lex Soft. Have rated all of you.... Quentin and Kevin. information provided is helpful :)

ashish kadali · Accepted Answer · 2022-01-13 10:29:01Z

1

give your JSON file name which is present in the public folder and store the data links

componentDidMount() {
    fetch("./url.json")
      .then((res) => res.json())
      .then((data) => {
        this.setState({ links: data });
        console.log(this.state);
      });
  }

answered Jan 13, 2022 at 10:29

ashish kadali

111 bronze badge

1 Comment

Muhammad Mubashirullah Durrani Over a year ago

The path is relative, will this access the public folder?

Hamid Alinia · Accepted Answer · 2021-06-05 10:55:35Z

-1

why using fetch? I think the speed is slow... I think this solution would be better... you can add this line into your index.html:

<script type="text/javascript" src="settings.js"></script>

then in settings.js you can do this:

 window.globalTS= {
  "site_url": "hi.com",
  "home_url": "hello.com"
};

now in your components you can get to variables like this:

console.log(window.globalTS.site_url);

share and comment me your idea, thanks!

answered Jun 5, 2021 at 10:55

Hamid Alinia

8211 bronze badges

2 Comments

Tyler2P Over a year ago

This answer is exactly the same as this answer. If you feel this question is a duplicate, give it a flag, don't just copy and paste the same answer all over the network.

Hamid Alinia Over a year ago

@Tyler2P thanks, I just gave a flag. both questions has one meanings, just different keywords: stackoverflow.com/a/67848787/5008599

Collectives™ on Stack Overflow

Fetch local JSON file from public folder ReactJS

5 Answers 5

Comments

Comments

1 Comment

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

1 Comment

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related