Could not fetch local JSON file from public folder in React

Question

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:

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

Any help is appreciated. Thanks!

seems like error pointing to bad json, examine what it actually returns — Nonik
– Nonik, Commented Oct 14, 2021 at 16:37
What does your directory structure look like in regard to the location of the json file? — Stitch
– Stitch, Commented Oct 14, 2021 at 16:38
it should be fetch(myRequest).then(response => response.json()) you are not returning response.json — Isaac
– Isaac, Commented Oct 14, 2021 at 16:39

Nikhil · Accepted Answer · 2021-10-14 16:47:47Z

0

use this:

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

  }

answered Oct 14, 2021 at 16:47

Nikhil

3,9785 gold badges20 silver badges34 bronze badges

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

2 Comments

NoobNewb Over a year ago

I'm seeing the same error

Nikhil Over a year ago

show us full folder structutre uncollapsed..

Collectives™ on Stack Overflow

Could not fetch local JSON file from public folder in React

EDIT

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

EDIT

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related