score:34

Accepted answer

I think your fetch argument is wrong. It should be

fetch('data/mato.json')

score:-2

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!

score:0

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);
      });
  }

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

score:7

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()
  },[])

Related Query

More Query from same tag