Returning PromiseValue when creating an object

Ok so i've searched around and found nothing related to this problem.

My problem is something like this ->

I create an object (push into array) with some info taken from an api. After getting the info from the api i need to call yet another API to get further information on users. Since there are multiple keys for users i'd like to be able to set them inline with a simple function.

I'm doing something like this ->

_item.push({
    Author: setPeople(item.Author.Title),
    Title: item.Title,
    ....
    Requester: setPeople(item.Requester.Title
})

At the moment i am getting the promise set(entirely) and not the PromiseValue. I know you usually do something like setPeople(name).then(() => {}) however that is not working in my object (sets the key too fast).

Any tip on how i should approach this?

Updating with more code.

export const retrieveIrfItems = async (spId) => {
    let spQuery = "SITE" + SpQueryExtend1 + spQueryExpand;

    return new Promise((resolve, reject) => {
        let _items = [];
        axiosApi.get(SiteUrl + spQuery).then((response) => {
            //console.log(response.data.d);
            return response.data.d;
        }).then(async (item) => {
            //let requesterSP = setPeople()
            const createSPUser = async (user) => {
                let spUser;
                console.log("User prop is");
                console.log(user);
                setPeople(user).then((item) => {
                    spUser = item;
                });
                return spUser;
            }

                _item.push({
        Author: setPeople(item.Author.Title),
        Title: item.Title,
        ....
        Requester: setPeople(item.Requester.Title
    })

Ignore the unused function, i'm still doing tests to find a way for this problem.

Found the fix thanks to comments.

Using async/await wouldnt help me since i'd still get promise pending or undefined. What i had to use is ->

Requester: await setPeople(item.Requester.Title).then((user) => { return user }), Using that in my object seems to work, but my question is...how good is this approach? If there are lots of fields with this behaviour (currently 5), wouldnt that slow down the page by...a lot ?

Solution

Then you should try something like that :

export const retrieveIrfItems = async (spId) => {
  return new Promise((resolve, reject) => {
    let spQuery = "SITE" + SpQueryExtend1 + spQueryExpand;
    let _items = [];
    try{
      const axiosApiItem = await axiosApi.get(SiteUrl + spQuery);
      const item = axiosApiItem.data.d;
      _item.push({
        Author: await setPeople(item.Author.Title),
        Title: item.Title,
        ...
        Requester: await setPeople(item.Requester.Title)
      });
      return resolve(_items);
    }catch(e){
      return reject(e);
    }
  });
}

Async / await is a way to consume async Promise functions. The async keyword tells the javascript compiler that this function will consume one or more asynchronous functions. The await keyword tells the compiler that the next function call is asynchronous and returns a promise.

In your code, your first then() function should return a promise which is not the case, that's why the second then() can't be reached.

Also, in your code, your new Promise doesn't return anything. When you create a new Promise, you have to end it by calling resolve() or reject.

Hope it helps...