How to get value from object property in React or Javascript

Question

Why do I have to wrap await with () in order to get the output I need. I am hoping to get only the uid from the object

The data that is return from the function that I am importing is exactly how you see it

{uid : 'abcdefg', email:'[email protected]'}

import {ActiveUser} from './teamMembers.service';

export const retrieveList = async date => {
console.log('active user information here', (await ActiveUser()).uid); 
// outputs: Works as expected
// active user information here abcdefg

console.log('active user information here', await ActiveUser().uid); 
// outputs: 
//Undefined

console.log('active user information here', typeof (await ActiveUser()));
// outputs: 
// object
}

Because ActiveUser would be returning a promise so u need await to wait till it executes and returns your Object. developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… . await keyword is used for the function call, hence you need the braces and then you access the key of the object. — adzo261
– adzo261, Commented Oct 30, 2021 at 13:06
Because the object property access "dot" operator has a higher precedence so it gets evaluated first. Without the explicit grouping it reads as await (ActiveUser().uid). Remember PleaseExcuseMyDearAuntSally? developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… — Jared Smith
– Jared Smith, Commented Oct 30, 2021 at 13:09

Ran Turner · Accepted Answer · 2021-10-30 13:08:48Z

The await operator is used to wait for a Promise (The Promise object represents the eventual completion (or failure) of an asynchronous operation and its resulting value) and it can only be used inside an async function.

You need to await you're async task (ActiveUser) once and after that you can just reference it's data (which is the resolved state of that async code happening there)

import {ActiveUser} from './teamMembers.service';

export const retrieveList = async date => {
   const data = await ActiveUser();
   const uid = data.uid;
   const name = data.name;
}

I suggest you read more The event loop and the concurrency model and it's secret behind the JavaScript's asynchronous programming.

More about async - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function

More about event loop - https://developer.mozilla.org/en-US/docs/Web/JavaScript/EventLoop

Collectives™ on Stack Overflow

How to get value from object property in React or Javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related