I make fetch request in javascript . It is fetching data when I seed console it show me data. but when I try to alert it in then function it displays empty. it show alert promptly with page load. I think it alerting before request response

Here is my javascript code

fetch("/" + gUser.getData().id).then(res => {
        if (res.ok) {
        alert(res)
        }
    });

I make fetch request in javascript . It is fetching data when I seed console it show me data. but when I try to alert it in then function it displays empty. it show alert promptly with page load. I think it alerting before request response

Here is my javascript code

fetch("https://01b4e41e6262.ngrok.io/api/get_schedule_orders/" + gUser.getData().id).then(res => {
        if (res.ok) {
        alert(res)
        }
    });

• javascript
• fetch-api

• 1 You should be converting to res.json or res.text to get the content from response. – HymnZzy Commented Dec 12, 2020 at 17:27
• Does this answer your question? How do I return the response from an asynchronous call? – LeviathanCalumet Commented Dec 12, 2020 at 17:42
• Does this answer your question? Pure Javascript fetch() method to java Servlet, how do i get and pass data? – Dan O Commented Dec 12, 2020 at 17:47
• 1 there are many, many, many Stack Overflow questions about how to access data in the response to fetch. which of them have you researched and why did they not solve your particular problem? – Dan O Commented Dec 12, 2020 at 17:48

2 Answers 2

fetch() returns a Promise initially, so res is initially a promise, either resolved or rejected. Then res.json() again returns a promise and not the value directly (You may verify this by doing a console.log(res) in the first then(), there in the prototype you will see json(), which is again Promise based.

That's why we chain promises by doing return res.json() and get our data in the second promise resolve and in case of rejection catch() callback is invoked.

fetch("https://01b4e41e6262.ngrok.io/api/get_schedule_orders/" + gUser.getData().id).then(res => {
    if (res.status>=200 && res.status <300) {
      return res.json()
    }else{
      throw new Error();
    }
}).then(data=>console.log(data))
 .catch(err=>console.log('fetch() failed'))

UPDATE: your API is returning an empty array.

Please check the API params.

The Fetch API initiates a chain of two Promises.

• the first promise retrieves the data from the server
• the second promise resolves the retrieved data (using .text(), .json() etc.)

Example (using async / await syntax):

const getScheduleOrders = async (gUser) => {

  const response = await fetch('https://01b4e41e6262.ngrok.io/api/get_schedule_orders/' + gUser.getData().id);
  const scheduleOrder = await response.text();
  await window.alert(scheduleOrder);
}