使用 JavaScript Trello API 链接 promise

Question

I'm trying to use the JavaScript Trello API to compile a list of cards that can be from any of the users boards that fall under any list with the name "todo".

I successfully was able to get an array of list ID's from all boards with the name "todo".

...

}).then(function(list_data) {

        console.log("List Data", list_data);
        console.log("List Data Length", list_data.length);

        var cards_arr = [];

        $.each(list_data, function(index, value) {

            Trello.get("/lists/" + value.id + "/cards?fields=name,shortUrl")
            .then(function(cards) {

                $.each(cards, function(index, card) {
                    cards_arr.push(card.id);
                })

            })

        })

        console.log("Cards Array", cards_arr);

        return cards_arr;

    })

When I look at the console log where it's showing my "list_data" variable I get an array of 6 items, but for some reason the length of the array is equal to 0 and doesn't allow me to loop through the "empty" array.

Console Log SnapShot

I feel that I may not be using the Trello API in the most effective way, so I will go ahead and post the full code below.

Any help would be greatly appreciated. Thanks

    var boards_arr = [];

    // ==== LOOP THROUGH BOARDS
    Trello.get("/member/me/boards?fields=name,id,idOrganization")
    .then(function(boards) {

        $.each(boards, function(index, board) {
            if (board.idOrganization != "5112df8dad3201247401349e") return;
            boards_arr.push(board.id);
        });

        return boards_arr;

    }).then(function(board_data) {

        var lists_arr = [];

        console.log("Board Data", board_data);

        $.each(board_data, function(index, value) {

            Trello.get("/boards/" + value + "/lists?fields=id,name")
            .then(function(lists) {

                $.each(lists, function(index, list) {

                    var listName = list.name.replace(" ", "").toLowerCase();
                    if (listName != "todo") return;

                    lists_arr.push(list.id);
                });

            });

        });

        return lists_arr;

    }).then(function(list_data) {

        console.log("List Data", list_data);
        console.log("List Data Length", list_data.length);

        var cards_arr = [];

        $.each(list_data, function(index, value) {

            Trello.get("/lists/" + value.id + "/cards?fields=name,shortUrl")
            .then(function(cards) {

                $.each(cards, function(index, card) {
                    cards_arr.push(card.id);
                })

            })

        })

        console.log("Cards Array", cards_arr);

        return cards_arr;

    })

Answer 1

Since you are running an asynchronous operation ( Trello.get ) inside your $.each callback, the elements won't be added to the array until after these have completed, which is after $.each returns. So no elements have been added by the time you call console.log(cards_arr) .

What you should do instead, is to store the promises you get from Trello.get in an array, then call Promise.all to wait for all to complete, and then you build the cards_arr array when you have all the results. Since this separates the asynchronous and synchronous operations, you can be sure that cards_arr is actually complete when you call console.log afterwards.

promise
  .then(function(list_data) {
    console.log("List Data", list_data);
    console.log("List Data Length", list_data.length);

    // do all operations and store results in an array
    var resultPromises = list_data.map(function(value) {
      return Trello.get("/lists/" + value.id + "/cards?fields=name,shortUrl")
    });

    // wait for all operations to complete
    return Promise.all(resultPromises);
  })
  .then(function(results) {
    // create cards_arr from results
    var cards_arr = [];
    $.each(results, function(index, cards) {
      $.each(cards, function(index, card) {
        cards_arr.push(card.id);
      });
    });

    // this should print the correct array
    console.log("Cards Array", cards_arr);

    return cards_arr;
  })