Fetching data from JSON file returning nothing

Question

I am building a solar system app and I want to have all of my planet's info in a JSON file for easy access. The JSON file is in the following format
Planet-info.json, in the public folder of my React app

  "planets": [
        {
            "Name": "Mercury",
            "Description": "The smallest planet in our solar system and closest to the Sun—is only slightly larger than Earth's Moon. Mercury is the fastest planet, zipping around the Sun every 88 Earth days.",
            "Moons": 0,
            "Habititable": "false"
        },
        {
            "Name": "Venus",
            "Description": "is hot",
            "Moons": 0,
            "Habititable": "false"
        }
    ]

And I am fetching the data with the useEffect hook

 const [planetData, setPlanetData] = useState();
  useEffect(() => {
    const fetchData = () => {
      fetch("/planet-info.json").then((result) => {
        setPlanetData(result);
      });
    };
    fetchData();
    console.log(`planet data is ${planetData}`);
  }, []);

However when this code runs and the console.log statement runs it returns the line planet data is It does not say undefined, or even [Object object] it is simply blank and I am unable to troubleshoot from there.

Hanchen Jiang · Accepted Answer · 2022-01-09 03:19:32Z

1

fetchData runs asynchronously. So what's happening is

fetchData starts
console.log executes(before the json file has the chance to load)
when the fetch completes, setPlanetData(result) happens. If you want to see the value printed out, this should do it:

useEffect(() => {
  fetch("/planet-info.json").then(result => {
    const json = result.json();
    console.log(json);
    setPlanetData(json);
  });
});

edited Jan 9, 2022 at 3:19

answered Jan 9, 2022 at 3:03

Hanchen Jiang

2,6702 gold badges12 silver badges21 bronze badges

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

5 Comments

Dylan Bozarth Over a year ago

TypeError: Cannot read property 'then' of undefined I think I am running the function in the wrong place.

Hanchen Jiang Over a year ago

Oops missed a line in my answer. I fixed it now. Needs a return in fetchData

Dylan Bozarth Over a year ago

It is no longer crashing, but now it is logging undefined

Hanchen Jiang Over a year ago

Lol look at me making mistakes. Fixed it now.

Hanchen Jiang Over a year ago

I made another update. Your JSON is probably fine. It's how fetch gets it back. You can use the json function on the response object to get the JSON value.

Collectives™ on Stack Overflow

Fetching data from JSON file returning nothing

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related