Data Fetching from a Static JSON File / REACT

Question

I have a static json file appyling this format:

[
    {/*OBJECT1*/}, {/*OBJECT2*/} /* SO ON ... */
]

I wanted to fetch data to my React Component from this JSON file

I fetch the data in my React component by using following code

  useEffect(() => {
    async function getEssayData() {
      const res = await fetch('/essayData.json');
      const data = await res.json();
      return data;
    }

    const fetchData = getEssayData();
    console.log('Result Data   ' + fetchData);
    console.log(fetchData);
    console.log('Data    ' + data[0]);
  }, []);

i've tried lots of things, this is only one of them; however i couldn't reach my objects inside of JSON file.

(Fetching is happening correctly but i couldn't reach data objects ...)

console image , i really appreciate if you can help me with that.

I'm looking for an apt duplicate, but just move the console.log operations to inside the function. All the effect should be doing is calling the function, all of the logic in this case should be inside the getEssayData function. — David
– David, Commented Jan 20 at 17:13
@David YEAH IT WORKED THX but why, i was returning my data; and after returning, i was just logging it. (after edit => ) i got it, i figure it out i guess. thx again — silenceofworld
– silenceofworld, Commented Jan 20 at 17:17
Because you weren't awaiting the call to getEssayData(). It returns a Promise. — David
– David, Commented Jan 20 at 17:19

Aghas Ghazryan · Accepted Answer · 2025-01-20 17:28:38Z

2

When you try to log 'data' it is not defined there cause you created it inside a function (getEssayData). It is available only in that function. You shoul use useState to set the data which will be available anywhere in the component.


    const [data, setData] = useState(null);

  useEffect(() => {
    async function getEssayData() {
      const res = await fetch("/essayData.json");
      const data = await res.json();
      setData(data); // Save the fetched data in the state
    }
    getEssayData();
  }, []);

  // Log the fetched data when it is available
  useEffect(() => {
    if (data) {
      console.log("Fetched Data: ", data);
      console.log("First item: ", data[0]);
    }
  }, [data]);

answered Jan 20 at 17:28

Aghas Ghazryan

363 bronze badges

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

Collectives™ on Stack Overflow

Data Fetching from a Static JSON File / REACT

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related