JSFiddle - React, Tailwind, and code Playground

Basic Example

by davidletts

HTML

<script src="https://api.trello.com/1/client.js?key=8d4cb5f5df5642c499acdba30aae9dd0&amp;dummy=.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.css">
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.js"></script>
<div id="loggedout">
  <a id="connectLink" href="#">Connect To Trello</a>
</div>

<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>

JavaScript

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

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

var onAuthorize = function() {
  updateLoggedIn();

  var carddata = [];

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

    var boardUrl = "";

    boardUrl = "members/me/boards";

    Trello.get(boardUrl, function(boards) {

      console.log("loading lists...");
      $.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]);
                            }
              */
            });

          });

        });

      });

    });

  });

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

};


Trello.authorize({
  type: "popup",
  name: "Trello dashboard1",
  scope: {
    read: true,
    write: false
  },
  expiration: "never",
  success: onAuthorize,
  error: function() {
    console.log("Failed authentication");
  }
});



var logout = function() {
  Trello.deauthorize();
  updateLoggedIn();
};



$("#connectLink")
  .click(function() {
    Trello.authorize({
      type: "popup",
      success:...