How to pass json object from web api in javascript to rest of project

Question

I'm making a React web based planer that stores user input events in a SQL server accessed by a C# asp.net api. Both the api and fetch statements return the results I expect, but I'm struggling with passing the received data to the rest of the project.

This is the fetch command I am using and the json is the final value I am trying to use (it saves the details of the event in day, month, year, title, tag format)

fetch(BaseUrl + '/api/eventreader/6', {
        method: 'GET',
        headers: {
            'Accept': 'application/json',
        },
    })
        .then(response => response.json())
        .then(json => {

            
        }

        )

I tried setting a global variable in the file, setting it equal to json, but it always shows up as undefined. I've also tried adding elements to the array but the array also says it's empty. Any ideas?

Answer 1

You can use state variables to store data. For example:

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

useEffect(() => {
  fetch(BaseUrl + "/api/eventreader/6", {
    method: "GET",
    headers: {
      Accept: "application/json",
    },
  })
    .then((response) => response.json())
    .then((json) => {
      setData(json);
    });
}, []);

console.log(data);