Javascript - set api json return to a variable not console.log

Question

total JS newbie here. Our office utilizes HCL Leap for form building and I need to write some javascript code to populate a form. Unfortunately, all the examples I seem to be coming across online output results to console.log. I need it to actually get assigned to a variable. Here's an example of some code I've been trying to work with that should populate a form text area with with json output:

var UserInfo = (async function getUserInfo() {
  var response = await fetch('https://jsonplaceholder.typicode.com/todos/1')
  console.log(response.json())
})();

item.setValue(UserInfo);

When I preview the code, the form populates instead with "[object Promise]". I assume it's some sort of timing issue with how the code is written. Anyone have any advice?

`.json` returns a new promise. so give `console.log(await response.json())` a try. — Daniel A. White, Sep 11 '20 at 18:50
Does this answer your question? [Why is my variable unaltered after I modify it inside of a function? - Asynchronous code reference](https://stackoverflow.com/questions/23667086/why-is-my-variable-unaltered-after-i-modify-it-inside-of-a-function-asynchron) — Klaycon, Sep 11 '20 at 18:54
Hi @DanielA.White, unfortunately it did not. Changing "console.log(response.json())" to "console.log(await response.json())" still returns "[object Promise]" inside the form. — l8nightrick, Sep 11 '20 at 19:03

HARDY8118 · Answer 1 · 2020-09-12T08:10:08.447

0

Fetch returns a Promise instead of the response. The response can be parsed later as plain text or as json (like you have done). The catch is the response.json() also returns a Promise. So you will need an await before response.json(). The complete code should be:

var UserInfo = await (async function getUserInfo() {
  try{
    var response = await fetch('https://jsonplaceholder.typicode.com/todos/1')
    var jsonResponse = await response.json()
    return jsonResponse
  }
  catch(e){
    console.error(e)
  }
})();
item.setValue(UserInfo);

or in one line

var UserInfo = await (await fetch('https://jsonplaceholder.typicode.com/todos/1')).json()
if(UserInfo)
  item.setValue(UserInfo)

Whenever using async/await, you should always wrap it inside try/catch block as it may return Error instead of result

edited Sep 12 '20 at 08:10

answered Sep 11 '20 at 19:06

HARDY8118

622
7
15

I attempted the first block of code (for some reason the second block gives an error that it's "missing ) after argument list"). The first block returns the same result; "[object Promise]" in the form area. I'm beginning to wonder if it's some quirk with Leap. – l8nightrick Sep 11 '20 at 19:20
I forgot that `.json()` also returns a Promise. You will need another await before assigning to UserInfo. I have edited the answer – HARDY8118 Sep 12 '20 at 08:12
Also, I have checked the second one it seems fine. Maybe if you can share some more information about the error you are facing. – HARDY8118 Sep 12 '20 at 08:13

shender · Answer 2 · 2020-09-11T19:56:08.523

You need to await all the things:

var UserInfo = (async function getUserInfo() {
  var response = await fetch('https://jsonplaceholder.typicode.com/todos/1')
  // ``.json` also returns a promise, so use `await` to reference the actual result
  const data = await response.json()
  console.table(data)

  // Since this variable comes from a function expression, explicitly return 
  // `response.json()` to set the final value as intended
  return data
})();

item.setValue(await UserInfo);

If the main execution context (with item.setValue) isn't inside an async function, you will have to wrap it with an async IIFE in order to use await to set item.value().

The await keyword is only valid inside async functions. If you use it outside of an async function's body, you will get a SyntaxError. Source: MDN

(async () => {
  
  var UserInfo = await (async function getUserInfo() {
    var response = await fetch('https://jsonplaceholder.typicode.com/todos/1')
    // ``.json` also returns a promise, so use `await` to reference the actual result
    const data = await response.json()
    console.table(data)

    // Since this variable comes from a function expression, explicitly return 
    // `response.json()` to set the final value as intended
    return data
  })();

  item.setValue(UserInfo);
})();

Here's another way, if you need to avoid using an async wrapper in the upper scope:

// Simplify this method, not an IIFE any more
async function getUserInfo() {
  var response = await fetch('https://jsonplaceholder.typicode.com/todos/1')
  const data = await response.json()
  
  console.table(data)
  return data
};

// This part doesn't need to exist inside an async function
getUserInfo()
  .then((info) => item.setValue(info))
  .catch((err) => console.error(err))

HCL Leap isn't liking this code for some reason. I get the error "Javascript is invalid - Reason: missing ) after argument list" I'm not spotting any missing bracket, though. — l8nightrick, Sep 11 '20 at 19:18
Dang, sorry. It works when pasted into Chrome's console. I'm not familiar with HCL... I do know that in javascript you can't use `await` outside of an `async function()` though. You might want to try wrapping your main execution context in an async IIFE like in this example to see if that's causing the bracket warning: https://github.com/puppeteer/puppeteer#usage — shender, Sep 11 '20 at 19:27

score 0 · Answer 3 · answered Sep 11 '20 at 19:09

const UserInfo =  async () => {
  const response = await 
  fetch('https://jsonplaceholder.typicode.com/todos/1');
  return response.json();
};

UserInfo().then(data => {
  console.log(data)
  //set data to field
  //item.setValue(data)
}).catch(error => {
  throw error
})

MiBol · Answer 4 · 2020-09-11T22:40:53.013

-1

This could be helpful

var UserInfo = (async function getUserInfo() {
  var response = await fetch('https://jsonplaceholder.typicode.com/todos/1')
  var data = await response.json()
  // One way
  console.log(data)

  // Or, even better
  // You can use the console to put a message, and then, send also an object
  // You can also capture more information
  console.log('Console entry - Result of API:', { ApiResult: data, data, anotherValue: 'Hello world' })
})();

item.setValue(UserInfo);

Another approach it's using the promises: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise

Result: https://i.stack.imgur.com/w6ACM.jpg

edited Sep 11 '20 at 22:40

answered Sep 11 '20 at 18:56

MiBol

1,985
10
37
64

You forgot return. UserInfo will always be undefined – Aluan Haddad Sep 11 '20 at 18:57
Hmm. Same result. The form just returns "[object Promise]". – l8nightrick Sep 11 '20 at 19:10
Really? seems that's working: https://imgur.com/8k9Jise – MiBol Sep 11 '20 at 22:39

Javascript - set api json return to a variable not console.log

4 Answers4