how to get data from response from fetch javascript request

Question

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

Answer 1

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.

Answer 2

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