jQuery nested each loop not working as expected using Trello API

Question

The goal is to use the Trello API ( https://developers.trello.com/ ) to get all the members boards, and then display their cards under each board.

Not entirely sure if this is specific to the API or jQuery, but having a nested each loop does not work as intended. The code below shows a small part of the script I'm currently using. It currently displays all the board titles, and THEN all the cards, e.g.

<h1>Board 1</h1>
<h1>Board 2</h1>
<h1>Board 3</h1>
<li>Card 1 </li>
<li>Card 2 </li>
<li>Card 3 </li>

Rather then:

<h1>Board 1</h1>
<li>Card 1 </li>
<h1>Board 2</h1>
<li>Card 2 </li>
<h1>Board 3</h1>
<li>Card 3</li>

Adding some console logs inside the each loop show that the outer each loops completes everything first, and then goes through the inner loop which is not what I want.

var onAuthorize = function() {
    updateLoggedIn();
    $("#output").empty();

    // Get users boards
    Trello.get('/member/me/boards', function(board){

        // Loop through all boards
        $.each(board, function(ix, board) {


           // If the board is not closed, then go through it.
            if(board.closed != true){
                  $( "#output" ).append( '<a href="' + board.url + '"><h1>' + board.name + "</h1></a>" );
                     console.log("go through baords");
                  // Get all the members cards
                  Trello.get('/members/me/cards', function(cards){ 

                        $.each(cards, function(ib, card) { 

                            if(card.idBoard == board.id){

                                $( "#output" ).append( '<li class="BoardID' + card.idBoard +'"><a href="' + card.url + '">' + card.name + "</a></li>" );
                                    console.log("go through cards");
                            }

                        });

                  });
            }

        }); 

    });

};

Any help is appreciated.

Answer 1

It is the expected behavior as ajax request are executed asynchronously

// Get users boards
Trello.get('/member/me/boards', function (board) {

    // Loop through all boards
    $.each(board, function (ix, board) {
        var $board = $('<a href="' + board.url + '"><h1>' + board.name + "</h1></a>").appendTo("#output");
        console.log("go through baords");

        // If the board is not closed, then go through it.
        if (board.closed != true) {
            // Get all the members cards
            Trello.get('/members/me/cards', function (cards) {
                if (cards.length) {
                    var $ul = $('<ul />').insertAfter($board);
                    $.each(cards, function (ib, card) {
                        if (card.idBoard == board.id) {
                            $ul.append('<li class="BoardID' + card.idBoard + '"><a href="' + card.url + '">' + card.name + "</a></li>");
                            console.log("go through cards");
                        }
                    });
                }
            });
        }
    });
});