Extracting JSON from Fetch API

Question

I realise very similar questions have been answered before, but I'm still finding it very confusing as to how this works...

From my understanding promises are used to deal with asyc requests - these promises essentially send back the state or a "promise" that at some point later a JSON body (or other object) will be delivered.

What I'm trying to understand is how I properly handle these requests so that the function doesn't return until the JSON body is ready to be parsed.

Below I'm trying to simply extract the key "result" (which returns a string "result") and parse it to another variable that can be stored and then later used somewhere else in my code. Unfortunately, my code always returns a [Object Promise], rather than the extracted JSON. I believe this is because response.json is also a promise... however, I don't understand how I get out of the "chain of promises" and return a value that I can actually do something with.

Thanks for any advice,

async function name() {
    const response = await fetch('https://xxxxx.herokuapp.com/timespent', {});
    const json = await response.json();

    return json.result;
}

let varr = name();
console.log(varr)

asyn function always return promise. so you have to handle it in then method. If the code has return <non-promise> in it, then JavaScript automatically wraps it into a resolved promise with that value — varatharajan
– varatharajan, Commented Dec 28, 2018 at 11:25

Ashish · Accepted Answer · 2018-12-28 11:32:44Z

3

Since your function is async it always return a promise. You need to use await for result.

2 Comments

Hazzamataza Over a year ago

Thanks for the response. This makes sense how I can now access the variable locally. What's still confusing me is how I would access the result globally? i.e. if I do the following: var x = result() - I end up with the promise being returned again rather than the result

Ashish Over a year ago

you cant access return of result() directly. If you are dealing with promise, You need to understand how promise work. var x = result() - I is using return value of result, which is still a promise, you have not got the actual value. You need to understand how promise work. If you want to do something with the result of api, do it inside async function, or use .then()

Pratik S. Gode · Accepted Answer · 2018-12-29 21:38:46Z

In your example code, name function is declared async, so it returns a promise.

Inside that function body, you correctly handle async calls like fetch or the JSON transformation.

What you need now is either use await to wait for the function to "resolve", or use the "older" then/catch promises methods. Note that you cannot always use await outside an async function so you may need to wrap it.

Example :

async function name() {
  const response = await fetch('https://mautargets.herokuapp.com/timespent', {});
  const json = await response.json();
  return json.result;
}

// using promise.then
name().then(result => console.log(result));

// wrapping await
(async function test() {
  try{
    console.log(await name());
  }catch(error) {
    // error goes here if promise got rejected
  }
})()

nice, can the wrapping aspect be an anonymous function though? (Is the name test needed?)

Dyllan M · Accepted Answer · 2018-12-28 11:40:11Z

You could have a callback in the function declaration, and use '.then(...)' and call it when the promise has been resolved:

async function name(cb) {
    const response = await 
    fetch('https://mautargets.herokuapp.com/timespent', {});
    const json = response.json();
    json.then(x => cb(x))
}
    
name(console.log)

This is because you're using an Async function, which will return a promise.

Or if you would like the method to return, you could either call it in another Asynchronous context and utilize await again:

// Assume no callback: code just as you had it.
async function wrapper() {
    console.log(await name())
}

Or you could do name().then(...) as specified before:

// Assume no callback: code just as you had it.
name().then(console.log)

Hope this helps!

hhelsinki · Accepted Answer · 2022-01-09 06:01:31Z

I'm actually looking for the answer(same as yours), so I found this way.

I. ASK/REQUEST for data

 async function fetchMyJson() {
 const response = await fetch('https://1stAPI.devdeveloper1.repl.co/fiveD');
 const myData = await response.json();
 return myData;
 }

II.GET Extract data

fetchMyJson().then(myData => {
let myData_output = myData.USD[0].rate; // fetched or Get OUTPUT data
console.log(myData_output);
document.body.innerHTML = `<div>${myData_output}</div>`; //make sure you add ${} for output
});

async function fetchMyJson() {
  const response = await fetch('https://1stAPI.devdeveloper1.repl.co/fiveD');
  const myData = await response.json();
  return myData;
}
//GET Extract data
fetchMyJson().then(myData => {
  let myData_output = myData.USD[0].rate; // fetched or Get OUTPUT data
  console.log(myData_output);
  document.body.innerHTML = `<div>${myData_output}</div>`; //make sure you add ${} for output
});

z0gSh1u · Accepted Answer · 2022-01-09 07:16:00Z

It is correct that you await fetch and .json since they are async.

async function name() {
  const response = await fetch('http://blah.com/api', {});
  const json = await response.json();
  return json.result;
}

However, async and Promises inside function name make it async too. So the return value of name is a Promise that you should await it, or .then it, like:

// Old style .then
name().then(result => console.log(result))

// Modern style await
async function main() {
  const result = await name()
  console.log(result)
}

Collectives™ on Stack Overflow

Extracting JSON from Fetch API

5 Answers 5

2 Comments

1 Comment

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

1 Comment

Comments

Comments

Comments

Related