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

Question

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

到目前为止,我设法编写了一个获取所有这些信息并将其写入页面的jsfiddle,但我无法弄清楚如何将所有这些信息存储到某种数据结构中,然后可以将其传递给datatable插件.

到目前为止,这是从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中构建表之前调用了插件代码.

所以我计划将所有数据添加到一个数组中,然后将该数组作为数据源传递给datatable,但是我不知道如何在非常内循环之外访问数组.从做一些搜索我认为这与闭包和范围有关,但我很难理解它们是如何工作的(我对Javascript很新).

是否有人能够帮助我使用这些基本代码并告诉我我做错了什么？

谢谢,大卫.

Answer 1

以下代码片段演示了如何在创建表后向数据表添加数据。对于如何等待所有异步请求完成，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 文档和$.when.apply($, someArray) 做什么？更多细节。