从 Trello 获取所有卡片并存储详细信息

Question

我正在尝试编写一些简单的 Javascript，它使用 Trello API 从我的帐户中获取所有板/列表/卡片并将它们添加到可排序的表中（使用 Datatables jquery 插件）。

到目前为止，我已经设法编写了一个 jsfiddle，它可以获取所有这些信息并将其写入页面，但我不知道如何将所有这些信息存储到某种数据结构中，然后可以将其传递给数据表插件。

这是我目前从 Trello 获取数据的小提琴：

JS Fiddle Link

var carddata = [];

Trello.members.get("me", function(member) {
$("#fullName").text(member.fullName);

var boardUrl = "";

boardUrl = "members/me/boards";

Trello.get(boardUrl, function(boards) {

  $.each(boards, function(ix, board) {

    Trello.get("/boards/" + board.id + "/lists", function(lists) {
      $.each(lists, function(ix, list) {
        Trello.get("lists/" + list.id + "/cards", function(cards) {

          $.each(cards, function(ix, card) {
            console.log("boardname: " + board.name + "; list name: " + list.name + "; card name: " + card.name);

            carddata.push(
              "boardname: " + board.name + 
              "; list name: " + list.name + 
              "; card name: " + card.name
            );

            var $tablerow = "";

            $tablerow = $(
              "<tr><td>" + board.name + 
              "</td><td>" + list.name + 
              "</td><td>" + card.name + 
              "</td></tr>"
            ).appendTo("#table_body");

          });
          /*
                        for (i = 0; i < carddata.length; i++) {
                          console.log("carddata: " + carddata[i]);
                        }
          */
        });

      });

    });

  });

});

});

// **** carddata array is empty at this point ****
for (i = 0; i < carddata.length; i++) {
 console.log("carddata: " + carddata[i]);
}

它遍历所有板、列表和卡片，当前将它找到的内容添加到 html 表（以及数组）中。然后，我使用 Datatables 插件将该 HTML 表更改为可排序表。

但是插件将 HTML 表视为空（据我所知），我认为这是因为在 Javascript 以 HTML 构建表之前调用了插件代码。

因此，我计划将所有数据添加到一个数组中，然后将该数组作为数据源传递到数据表中，但是我看不到如何使该数组在内部循环之外可访问。通过进行一些搜索，我认为这与闭包和范围有关，但我很难理解它们是如何工作的（我对 Javascript 很陌生）。

有没有人能帮助我让这个基本代码工作并告诉我我做错了什么？

谢谢， 大卫。

Answer 1

以下代码sn -p 演示了如何在创建表后向数据表中添加数据。对于如何等待所有异步请求完成，setTimeout 用于模拟异步行为的Trello.get 方法。

var boardHash = {};
var listHash = {};

var updateLoggedIn = function() {
  $("#loggedout").toggle(!isLoggedIn);
  $("#loggedin").toggle(isLoggedIn);
};

var loadCardData = function(){
	var carddata = [];
	var loadMember = function() {
		setTimeout(function(){
			console.log("Member loaded");
			loadBoard();
		},2000);
	}
	
	var loadBoard = function() {
		
		setTimeout(function(){
			console.log("Boards loaded");
			var listPromises = [];
			loadList(["boardA","boardB","boardC"],listPromises);
			$.when.apply($, listPromises).then(function(){
					table.rows.add(carddata).draw("");
			});
		},1000);
	};
	
	var loadList = function(boards,listPromises){
		$.each(boards,function(boardIndex, boardValue){
			var listDefered = $.Deferred();
			listPromises.push(listDefered.promise());
			setTimeout(function(){
				console.log(boardValue+" lists loaded");
				var cardPromises = [];
				loadCard(["listA","listA","listC"],boardValue,cardPromises);
				$.when.apply($, cardPromises).then(function(){
					listDefered.resolve();
				});
			},(boardIndex+1)*900);
		});
	};
	
	var loadCard = function(lists,boardValue,cardPromises){
		$.each(["listA","listA","listC"],function(listIndex, listValue){
			var cardDefered = $.Deferred();
			cardPromises.push(cardDefered.promise());
			setTimeout(function(){
				console.log(boardValue+" "+listValue+" cards loaded");	
				$.each(["cardA","cardB","cardC"],function(cardIndex, cardValue){
					carddata.push({
						"boardName":boardValue,
						"listName":listValue,
						"cardName":cardValue
					});
				});
				cardDefered.resolve();
			},(listIndex+1)*800);
		});
	};
	loadMember();
 };

var logout = function() {
  updateLoggedIn();
};


$("#connectLink")
  .click(function() {
	  loadCardData();
  });

$("#disconnect").click(logout);

var consoleLine = "<p class=\"console-line\"></p>";

console = {
  log: function(text) {
    $("#console-log").append($(consoleLine).html(text));
  }
};
var table = null;
$(document).ready( function () {
    table = $('#table_id').DataTable({
		columns: [
        { data: 'boardName' },
        { data: 'listName' },
        { data: 'cardName' }
		]
	});
} );

<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  <link href="//cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet" />
  <script src="//cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>

  <div id="loggedout">
    <a id="connectLink" href="#">Connect To Trello</a>
  </div>
</head>
<div id="loggedin">
  <div id="header">
    Logged in to as <span id="fullName"></span>
    <a id="disconnect" href="#">Log Out</a>
  </div>

  <div id="output"></div>
</div>

<table id="table_id" class="display" border=1>
  <thead>
    <tr>
      <th>Board</th>
      <th>List</th>
      <th>Card</th>
    </tr>
  </thead>
  <tbody id="table_body">

  </tbody>
</table>

<div id="console-log"></div>

</html>

用于向数据表添加数据

因此，在您的代码中，将columns 选项添加到数据表中，并在所有ajax 请求完成后使用rows.add 方法将数据添加到数据表中。

等待所有 ajax 请求完成

最棘手的部分是如何确保所有响应都完成，这可以通过 $.Deferred() 和 $.when.apply 来实现，请参阅JQuery document 和What does $.when.apply($, someArray) do? 了解更多详细信息。