Fetch Request response.json() returns undefined [duplicate]

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>
    )
}

return the fetch itself. write down return fetch (theurl, ...) like that. — Pradip Dhakal
– Pradip Dhakal, Commented Nov 14, 2021 at 12:25
This return a promise, so you need to use async await for that. learn more about it: developer.mozilla.org/en-US/docs/Learn/JavaScript/Asynchronous/… — Pradip Dhakal
– Pradip Dhakal, Commented Nov 14, 2021 at 12:27

Salvino D'sa · Accepted Answer · 2021-11-14 12:37:43Z

2

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);
})();

answered Nov 14, 2021 at 12:37

Salvino D'sa

4,5761 gold badge14 silver badges26 bronze badges

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

5 Comments

THE YAAAAA Over a year ago

Sry for asking again, but how do i get the response data out of this async function to add it to the render in react?

Salvino D'sa Over a year ago

You just need to call this line and assign the result to a variable await httpGet('https://jsonplaceholder.typicode.com/users'). I've used a async immediately invoked function here just to showcase a working code. If you still need help, please feel free to create a separate question with your react code in it so that the community can help you better.

THE YAAAAA Over a year ago

In react i am using a simple component function to render my json output, but i cant call the httpGet function with await, because the component function isnt async

Salvino D'sa Over a year ago

This already has a lot of answers, as I can see on SO. namely, this, this & this

THE YAAAAA Over a year ago

Ah, thanks for your time, i will look into it

Pradip Dhakal · Accepted Answer · 2021-11-14 12:38:19Z

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)
})()

answered Nov 14, 2021 at 12:38

Pradip Dhakal

1,9821 gold badge15 silver badges31 bronze badges

Collectives™ on Stack Overflow

Fetch Request response.json() returns undefined [duplicate]

2 Answers 2

5 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Linked

Related