1

Good Day,

I'm trying to fetch data from my local JSON file located in the public folder of my react app. I know this is a frequently asked question in SO and I've already looked up topics related to my issue beforehand but this below is the nearest one.

Fetch local JSON file from public folder ReactJS

I'm using the code below to fetch my json file:

  const getResponse = () => {
    fetch('responseScript.json')
      .then(response => { response.json() })
      .then(data => { console.log(data) })

  }

  useEffect(() => {
    getResponse();
  })

The main issue is whenever I fetch data from my json file, I get undefined and an error: enter image description here

responseScript is in the public folder. I've also checked devtools and in the network tab, I can see that the request status code is 200 OK.

I'm not sure if it adds to the issue, but I'm using typescript. I've also looked into using FileStructure and that doesn't seem to work for me also.

EDIT

My JSON structure looks like this:

[
    {
     "Category":"Some text here",
     "Issue":"Some text here",
     "Answer":"Some text here",
     "Response":"Some text here"
    },
    {
     "Category":"Some text here",
     "Issue":"Some text here",
     "Answer":"Some text here",
     "Response":"Some text here"
    },
    {
     "Category":"Some text here",
     "Issue":"Some text here",
     "Answer":"Some text here",
     "Response":"Some text here"
    }

]

The folder structure is

enter image description here

Any help is appreciated. Thanks!

NoobNewb
  • 583
  • 2
  • 10
  • 21
  • seems like error pointing to bad json, examine what it actually returns – Nonik Oct 14 '21 at 16:37
  • What does your directory structure look like in regard to the location of the json file? – Stitch Oct 14 '21 at 16:38
  • That suggests that your "JSON" is actually HTML. – Vishnu Oct 14 '21 at 16:39
  • it should be `fetch(myRequest).then(response => response.json())` you are not returning `response.json` – Isaac Oct 14 '21 at 16:39
  • attach the folder structure image of the project. – Nikhil S Oct 14 '21 at 16:48
  • @Isaac is correct, this is _also_ a bug but it doesn't solve the problem that that URL is not returning JSON. Figure out what the correct URL is first. – Evert Oct 14 '21 at 17:03
  • @Isaac I did that but I get the error SyntaxError: Unexpected token < in JSON at position 0 – NoobNewb Oct 14 '21 at 17:57
  • @Evert Doesn't the URL default to the public folder? – NoobNewb Oct 14 '21 at 17:58
  • @NoobNewb, no. It depends on where your application is running and how your server is configured. Try opening the json file directly in your browser. What's the full URL when you do? – Evert Oct 14 '21 at 18:03
  • @NoobNewb and where does your script .js which is calling the fetch present?? – Nikhil S Oct 14 '21 at 18:03
  • show us full folder structutre uncollapsed.. – Nikhil S Oct 14 '21 at 18:04
  • @NoobNewb: The structure of your json file is wrong, JSON top level should always wrapped by curly braces – Isaac Oct 15 '21 at 01:28
  • I've tracked the issue on my package.json file where there was a set homepage for the app. I've removed the homepage for now since I'm in dev mode. Thanks for all your insights! – NoobNewb Oct 15 '21 at 15:02

1 Answers1

0

use this:

  const getResponse = () => {
    fetch("./public/responseScript.json")
      .then(response => { response.json() })
      .then(data => { console.log(data) })

  }
Nikhil S
  • 3,786
  • 4
  • 18
  • 32