This works

fetch('')
  .then(response => response.json())
  .then(json => console.log('4. userId = ' + json.userId))

to give me:

4. userId = 1

But when I try to use await

{
  async function doFetch() {
    const result = await fetch('');
    console.log('8. await: ' + String(result.json()));
  } doFetch();
}

I get the promise instead as output

8. await: [object Promise]

How to get at the JSON value?

Update

Thanks for answers:

console.log('8. await: ' + String(await result.json()));

I should have been clearer though, how to get the userId? I tried

console.log('8. await: ' + String(await result.json().userId));

but I get undefined

This works

fetch('https://jsonplaceholder.typicode./todos/1')
  .then(response => response.json())
  .then(json => console.log('4. userId = ' + json.userId))

to give me:

4. userId = 1

But when I try to use await

{
  async function doFetch() {
    const result = await fetch('https://jsonplaceholder.typicode./todos/1');
    console.log('8. await: ' + String(result.json()));
  } doFetch();
}

I get the promise instead as output

8. await: [object Promise]

How to get at the JSON value?

Update

Thanks for answers:

console.log('8. await: ' + String(await result.json()));

I should have been clearer though, how to get the userId? I tried

console.log('8. await: ' + String(await result.json().userId));

but I get undefined

• javascript
• promise
• async-await
• async.js

• fixed typo of user=1 hardcoded to be userid (what the code actually has) – Michael Durrant Commented Jul 9, 2020 at 17:12

2 Answers 2

When you need two then calls in the first version, then expect to need two awaits in the second version. The json() method returns a promise.

So change:

console.log('8. await: ' + String(result.json()));

To:

console.log('8. await: ' + String(await result.json()));

To get a property, just do as usual, but make sure you have awaited the object first. So first close the parentheses:

(async function () {
    const result = await fetch('https://jsonplaceholder.typicode./todos/1');
    console.log('8. await: ' + (await result.json()).userId);
})();

If you need more than just that one property, then just first get the whole object in a variable, and use that variable from then on:

(async function () {
    const result = await fetch('https://jsonplaceholder.typicode./todos/1');
    const obj = await result.json();
    console.log('userId = ' + obj.userId);
})();

result.json() will return a Promise that you need to await.

Currently, you are converting Promise object returned by result.json() into string and that is what gets logged on the console.

const result = await fetch('https://jsonplaceholder.typicode./todos/1');
const data = await result.json();
console.log('8. await: ' + data);

Edit:

how to get the userId

You are getting undefined because you are converting object returned by await result.json() in to string and when any object is converted to string, you get something like "[object Object]".

Just do not convert the object returned by await result.json() into string and simple access the userId property

console.log('8. await: ' + (await result.json()).userId);

See the following snippet

async function fetchData() { 
  const result = await fetch('https://jsonplaceholder.typicode./todos/1');
  const data = await result.json();
  console.log(String(data));        // what you are doing
  console.log(data);                // what you should do
}

fetchData();