Trello cards show amount on a webpage

Question

How to get how many cards have a list in Trello and show it on a page in a site? It is possible?

I want for example:

-------- MY WEB PAGE ---------

TO-DO: 2 DOING: 5 DONE: 10

Hi and welcome to stackoverflow, could you show some of the attempts you have made ? Have a read here also : http://stackoverflow.com/help/how-to-ask — Pogrindis, Nov 04 '15 at 21:01
but I do not know how to do, so I'm wondering if it's possible and where should I start. — Marcelo Junior, Nov 04 '15 at 21:48
@marcelo-junior another norm here is to select an answer to your question if it answers it. I have posted to answers to your question. Please select one or the other or ask refining questions if these answers do not suit your needs. — Joshua Cook, Nov 08 '15 at 15:59

score 1 · Answer 1 · answered Nov 07 '15 at 16:30

Get the shortlink from your board from its url. For my board https://trello.com/b/5WWgH1bB/tasks, the shortlink is 5WWgH1bB.

You can query the board using the following API request:

$ curl https://trello.com/1/boards/5WWgH1bB/lists

This returns:

[{"id":"563e21ae7f01e6bb5334306d",
  "name":"To Do",
   "closed":false,
   "idBoard":"563e20b4b8580872c2b1b469",
   "pos":65535,
   "subscribed":null},
  {"id":"563e21b0e4572f932855c1d8",
   "name":"Done",
   "closed":false,
   "idBoard":"563e20b4b8580872c2b1b469",
   "pos":131071,
   "subscribed":null},
  {"id":"563e21b171ba02aa1f3c67be",
   "name":"Doing",
   "closed":false,
   "idBoard":"563e20b4b8580872c2b1b469",
   "pos":196607,
   "subscribed":null}]

Suppose I hand this JSON to some programming language, like say Ruby, as such

require 'json'
trello_response = '[{"id":"563e21ae7f01e6bb5334306d","name":"To Do","closed":false,"idBoard":"563e20b4b8580872c2b1b469","pos":65535,"subscribed":null},{"id":"563e21b0e4572f932855c1d8","name":"Done","closed":false,"idBoard":"563e20b4b8580872c2b1b469","pos":131071,"subscribed":null},{"id":"563e21b171ba02aa1f3c67be","name":"Doing","closed":false,"idBoard":"563e20b4b8580872c2b1b469","pos":196607,"subscribed":null}]'
trello_hash = JSON.parse(trello_response)
trello_hash.each {|i| puts "#{i['name']}, #{i['id']}" }

This will give me

To Do, 563e21ae7f01e6bb5334306d
Done, 563e21b0e4572f932855c1d8
Doing, 563e21b171ba02aa1f3c67be

These are the unique ids associated with each list on my board. I can in turn query these.

$ curl https://trello.com/1/lists/563e21ae7f01e6bb5334306d/cards
$ curl https://trello.com/1/lists/563e21b0e4572f932855c1d8/cards
$ curl https://trello.com/1/lists/563e20b4b8580872c2b1b469/cards

Each of these requests returns a large JSON blob with the details of the cards on each list.

Suppose I handed these to Ruby one by one.

list_to_do = '[{"id":"563e21b5f666242dd2934377","checkItemStates":[],"closed":false,"dateLastActivity":"2015-11-07T16:07:17.423Z","desc":"","descData":null,"idBoard":"563e20b4b8580872c2b1b469","idList":"563e21ae7f01e6bb5334306d","idMembersVoted":[],"idShort":1,"idAttachmentCover":null,"manualCoverAttachment":false,"idLabels":[],"name":"task 1","pos":65535,"shortLink":"9xU5xLYI","badges":{"votes":0,"viewingMemberVoted":false,"subscribed":false,"fogbugz":"","checkItems":0,"checkItemsChecked":0,"comments":0,"attachments":0,"description":false,"due":null},"due":null,"idChecklists":[],"idMembers":[],"labels":[],"shortUrl":"https://trello.com/c/9xU5xLYI","subscribed":false,"url":"https://trello.com/c/9xU5xLYI/1-task-1"},{"id":"563e21b744fb22f201b747ab","checkItemStates":[],"closed":false,"dateLastActivity":"2015-11-07T16:07:19.095Z","desc":"","descData":null,"idBoard":"563e20b4b8580872c2b1b469","idList":"563e21ae7f01e6bb5334306d","idMembersVoted":[],"idShort":2,"idAttachmentCover":null,"manualCoverAttachment":false,"idLabels":[],"name":"task 2","pos":131071,"shortLink":"admRw9X0","badges":{"votes":0,"viewingMemberVoted":false,"subscribed":false,"fogbugz":"","checkItems":0,"checkItemsChecked":0,"comments":0,"attachments":0,"description":false,"due":null},"due":null,"idChecklists":[],"idMembers":[],"labels":[],"shortUrl":"https://trello.com/c/admRw9X0","subscribed":false,"url":"https://trello.com/c/admRw9X0/2-task-2"},{"id":"563e21b84d1f7ed445c6469e","checkItemStates":[],"closed":false,"dateLastActivity":"2015-11-07T16:07:20.961Z","desc":"","descData":null,"idBoard":"563e20b4b8580872c2b1b469","idList":"563e21ae7f01e6bb5334306d","idMembersVoted":[],"idShort":3,"idAttachmentCover":null,"manualCoverAttachment":false,"idLabels":[],"name":"task 3","pos":196607,"shortLink":"ZNfOzI2j","badges":{"votes":0,"viewingMemberVoted":false,"subscribed":false,"fogbugz":"","checkItems":0,"checkItemsChecked":0,"comments":0,"attachments":0,"description":false,"due":null},"due":null,"idChecklists":[],"idMembers":[],"labels":[],"shortUrl":"https://trello.com/c/ZNfOzI2j","subscribed":false,"url":"https://trello.com/c/ZNfOzI2j/3-task-3"}]'
list_done = '[{"id":"563e21bc36407537591b88f1","checkItemStates":[],"closed":false,"dateLastActivity":"2015-11-07T16:07:24.364Z","desc":"","descData":null,"idBoard":"563e20b4b8580872c2b1b469","idList":"563e21b0e4572f932855c1d8","idMembersVoted":[],"idShort":4,"idAttachmentCover":null,"manualCoverAttachment":false,"idLabels":[],"name":"task 4","pos":65535,"shortLink":"y2Px7aED","badges":{"votes":0,"viewingMemberVoted":false,"subscribed":false,"fogbugz":"","checkItems":0,"checkItemsChecked":0,"comments":0,"attachments":0,"description":false,"due":null},"due":null,"idChecklists":[],"idMembers":[],"labels":[],"shortUrl":"https://trello.com/c/y2Px7aED","subscribed":false,"url":"https://trello.com/c/y2Px7aED/4-task-4"},{"id":"563e21bea7e6e1c41f2048ac","checkItemStates":[],"closed":false,"dateLastActivity":"2015-11-07T16:07:26.376Z","desc":"","descData":null,"idBoard":"563e20b4b8580872c2b1b469","idList":"563e21b0e4572f932855c1d8","idMembersVoted":[],"idShort":5,"idAttachmentCover":null,"manualCoverAttachment":false,"idLabels":[],"name":"task 5","pos":131071,"shortLink":"6cGvweyp","badges":{"votes":0,"viewingMemberVoted":false,"subscribed":false,"fogbugz":"","checkItems":0,"checkItemsChecked":0,"comments":0,"attachments":0,"description":false,"due":null},"due":null,"idChecklists":[],"idMembers":[],"labels":[],"shortUrl":"https://trello.com/c/6cGvweyp","subscribed":false,"url":"https://trello.com/c/6cGvweyp/5-task-5"}]' 
list_doing = '[{"id":"563e21c0e4572f932855c201","checkItemStates":[],"closed":false,"dateLastActivity":"2015-11-07T16:07:28.775Z","desc":"","descData":null,"idBoard":"563e20b4b8580872c2b1b469","idList":"563e21b171ba02aa1f3c67be","idMembersVoted":[],"idShort":6,"idAttachmentCover":null,"manualCoverAttachment":false,"idLabels":[],"name":"task 6","pos":65535,"shortLink":"dy3bByst","badges":{"votes":0,"viewingMemberVoted":false,"subscribed":false,"fogbugz":"","checkItems":0,"checkItemsChecked":0,"comments":0,"attachments":0,"description":false,"due":null},"due":null,"idChecklists":[],"idMembers":[],"labels":[],"shortUrl":"https://trello.com/c/dy3bByst","subscribed":false,"url":"https://trello.com/c/dy3bByst/6-task-6"},{"id":"563e21c2e200c94a546dd4bf","checkItemStates":[],"closed":false,"dateLastActivity":"2015-11-07T16:07:30.399Z","desc":"","descData":null,"idBoard":"563e20b4b8580872c2b1b469","idList":"563e21b171ba02aa1f3c67be","idMembersVoted":[],"idShort":7,"idAttachmentCover":null,"manualCoverAttachment":false,"idLabels":[],"name":"task 7","pos":131071,"shortLink":"qVF7Z2sx","badges":{"votes":0,"viewingMemberVoted":false,"subscribed":false,"fogbugz":"","checkItems":0,"checkItemsChecked":0,"comments":0,"attachments":0,"description":false,"due":null},"due":null,"idChecklists":[],"idMembers":[],"labels":[],"shortUrl":"https://trello.com/c/qVF7Z2sx","subscribed":false,"url":"https://trello.com/c/qVF7Z2sx/7-task-7"}]'
hash_to_do = JSON.parse(list_to_do)
hash_done = JSON.parse(list_done)
hash_doing = JSON.parse(list_doing)

Then you can get the number of cards on each list by taking the size of the hashes you have created:

hash.size

You could display these values as such:

puts "TO-DO: #{hash_to_do.size} DOING: #{hash_doing.size} DONE: #{hash_done.size}"

which gives

TO-DO: 3 DOING: 2 DONE: 2

score 1 · Accepted Answer · answered Nov 07 '15 at 17:07

Here is a JavaScript method you can try in the browser's console:

$ trello_JSON = jQuery.get("https://trello.com/1/boards/5WWgH1bB/lists").responseJSON
Object {readyState: 1}
$ trello_JSON = trello_response.responseJSON
[Object, Object, Object]
$ trello_list_to_do = jQuery.get('https://trello.com/1/lists/'+trello_JSON[0]['id']+'/cards')
Object {readyState: 1}
$ trello_list_doing = jQuery.get('https://trello.com/1/lists/'+trello_JSON[1]['id']+'/cards')
Object {readyState: 1}
$ trello_list_done = jQuery.get('https://trello.com/1/lists/'+trello_JSON[2]['id']+'/cards')
Object {readyState: 1}
$ to_do_size = trello_list_to_do.responseJSON.length
3
$ doing_size = trello_list_doing.responseJSON.length
2
$ done_size = trello_list_done.responseJSON.length
4

Now let's say you had a div on your page with the class "content" and you want to add your counts to the first paragraph in that div.

$ paragraphs = document.querySelectorAll(".content p")

will give you an array of all paragraphs in that div. Now we add our results to the end of that paragraph.

$ paragraphs[0].innerHTML = paragraphs[0].innerHTML + "<b /r><br />TO DO: " + to_do_size + " DOING: " + doing_size + " DONE: " + done_size

Trello cards show amount on a webpage

2 Answers2