jQuery 使用 Trello API 嵌套每个循环无法按预期工作答案

【问题标题】：jQuery nested each loop not working as expected using Trello APIjQuery 使用 Trello API 嵌套每个循环无法按预期工作
【发布时间】：2016-01-26 16:41:09
【问题描述】：

目标是使用 Trello API (https://developers.trello.com/) 获取所有成员板，然后在每个板下显示他们的卡片。

不完全确定这是特定于 API 还是 jQuery，但是嵌套的 each 循环不能按预期工作。下面的代码显示了我当前使用的脚本的一小部分。它当前显示所有棋盘标题，然后显示所有卡片，例如

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

然后：

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

在每个循环中添加一些控制台日志表明，外部每个循环首先完成所有内容，然后通过内部循环，这不是我想要的。

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");
                            }

                        });

                  });
            }

        }); 

    });

};

感谢任何帮助。

【问题讨论】：

标签： jquery nested-loops trello

【解决方案1】：

这是异步执行ajax请求的预期行为

// 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");
                        }
                    });
                }
            });
        }
    });
});

【讨论】：

完美！谢谢 :) 工作就像一个魅力