Popular object with async/await nested

Question

Personal talk,

I am consuming the Trello API to retrieve items from card-specific checklists of a frame. So I am making the following path.

1. Retrieving information from the table
2. Retrieve information from the table lists
3. I retrieve cards from these lists
4. I recover checklists of these cards

The API is returning all right, but I’m having trouble understanding when and where to use async/await to perform these tasks.

Follow the code fragments:

onAuthorize = async () => {
    console.log('onAuthorize');

    try {
        await this.getBoardInfo();
        await this.getListsInfo();

    } catch (err) {
        console.error(err);
    }
}

getBoardInfo = async () => {
    console.log('getBoardInfo');

    const self = this;

    await window.Trello.get(`boards/${this.state.boardId}?fields=id,name&lists=open&list_fields=id,name,closed,pos`,
        (boardInfo) => {
            console.log('getBoardInfo <<', boardInfo);
            self.setState({ boardInfo });
        }
    );
}

getListsInfo = async () => {
    console.log('getListsInfo');

    let { boardInfo } = this.state;
    let self = this;

    for (const [idx, list] of boardInfo.lists.entries()) {
        console.log('getListsInfo >>>', idx, list);
        await window.Trello.get("lists/" + list.id + "/cards?fields=id,name",
            (cards) => {
                if (typeof cards !== 'undefined') {
                    console.log('getListsInfo <<<', idx, cards);
                    // boardInfo.lists[idx]['cards'] = self.getCardsInfo(cards);
                } else {
                    console.warn(`Lista ${list.name} vazia sem cards`);
                }
            }
        );

    };
}

getCardsInfo = async (cards) => {
    console.log('getCardsInfo', cards);

    if (!cards) {
        return [];
    }

    for (const [idx, card] of cards.entries()) {
        await window.Trello.get("cards/" + card.id + "/checklists?fields=id,name,checkItems",
            (checklists) => {
                console.log('getCardsInfo <<');
                cards[idx]['checklists'] = checklists;
            }
        );
    };

    return cards;
}

The getListsInfo like this returns right, one list at a time, but I can’t get it to go 1 by 1 searching the cards by nesting correctly.

The ultimate goal is that the boardInfo be populated with all the information I’m looking for.

Answer 1

async/await is not "respected" inside loops, either, foreach or even in arrays . map().

One solution to get around this is to use Promises to perform the loops, and, since the Promise is async, you can use await inside it. Here is an example of how it can be done:

   const promises = getCardsInfo.map(
  cards =>
    new Promise(async resolve => {
      if (!cards) {
        return [];
      }

      for (const [idx, card] of cards.entries()) {
        await window.Trello.get("cards/" + card.id + "/checklists?fields=id,name,checkItems",
          (checklists) => {
            console.log('getCardsInfo <<');
            cards[idx]['checklists'] = checklists;
          }
        );
      };

      resolve(cards);
    })
);

await Promise.all(promises);