Question

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

到目前为止，我设法编写了一个获取所有这些信息并将其写入页面的jsfiddle，但我无法解决如何将所有这些信息存储到某种数据结构中的问题。然后传递给datatable插件。

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

xml

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

然而，插件将HTML表视为空（从我可以看到），我认为这是因为在Javascript以HTML格式构建表之前调用了插件代码。

因此，我计划将所有数据添加到数组中，然后将该数组作为数据源传递到数据表中，但我无法看到如何在非常内循环之外访问数组。从做一些搜索我认为这与闭包和范围有关，但我很难理解它们是如何工作的（我对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 document和What does $.when.apply($, someArray) do?。

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

1 个答案:

用于将数据添加到数据表中

等待所有ajax请求完成