Fetch Request response.json() returns undefined

Question

I want to fetch a get request to my spring boot server, and i get my json back, but when i want to return it, there is an undefined error. I am new to Javascript, so the answer is probably obvious, but i cant find it!

Sry for bad english and thanks in regards!

Code:

function httpGet(theUrl)
{
    fetch(theUrl,
    {
        method: "GET",
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
      },
    })
    .then (response => response.json())
    .then(response => {
        console.log(response); // Logs the json array
        return response; // Returns undefined
    });
}

Edit with async, still does not work: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

async function httpGet(theUrl)
{
    const response = await fetch(theUrl,
    {
        method: "GET",
        headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
      },
    });
    const jsonResponse = await response.json()
    .then(data => {
        return data;
    });
}

This is my react component function:

 function Admin(){
    const data =  httpGet('https://jsonplaceholder.typicode.com/users'); // Not Working
    console.log(data);  
    return(
        <div>
            <h1> Admin Page</h1>
        </div>
    )
}

Answer 1

 function httpGet(theUrl) { return fetch(theUrl, { method: "GET", headers: { 'Accept': 'application/json', 'Content-Type': 'application/json', }, }) .then(response => response.json()); } (async() => { const response = await httpGet('https://jsonplaceholder.typicode.com/users'); console.log(response); })();

Answer 2

You can do this with async and await which makes easy to write and understand the code.

Here is the sample, that you can use.

 const httpGet = async (theUrl) => { const response = await fetch(theUrl, { method: "GET", headers: { Accept: "application/json", "Content-Type": "application/json" } }); return response.json(); }; // calling the method (async () => { const data = await httpGet("https://jsonplaceholder.typicode.com/posts/1") console.log("response data is: ", data) })()