Get all cards from Trello and store details

Question

I am trying to write a simple Javascript that uses the Trello API to get all boards / lists / cards from my account and add them to a sortable table (using the jQuery Datatables plugin).

I have so far managed to write jsfiddle which receives all this information and writes it to the page, but I cannot decide how to store all this information in some data structure, which can then be passed to the datatable plugin.

This is the script I still get from 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]); } 

It scans all the boards, lists and cards and currently adds what it finds in the html table (as well as the array). Then I use the Datatables plugin to modify this HTML table into a sortable table.

However, the plugin sees that the HTML table is empty (from what I see), I suppose this is due to something like the plugin code that is called before Javascript creates the table in HTML.

So instead, I planned to add all the data to an array, and then pass that array to datatable as a data source, but I cannot figure out how to make the array accessible outside the innermost loop. From some searches, I think this has to do with closure and scope, but I'm struggling to figure out how they work (I'm very new to Javascript).

Can anyone help me get this base code working and show me what I'm doing wrong?

Thanks, David.