Question

I'm building an app that shows progress of each Trello board as the the total number of checklist items compared to the number of completed checklist items. I Am able to do this for each board individually but cannot figure out how to display a total for the board.

I guess the main thing I need is how to differentiate between each board while going through the card .each loop. Once I get all the checklist items for that board I need to do something with that data and then move on to the next board.

Here's the code I have so far:

Trello.members.get("me", function (member) {
    var memberID = member.id;

    Trello.get("members/" + memberID + "/boards", function (boards) {
        $.each(boards, function (index, board) {
            var boardName = board.name,
                boardID = board.shortLink;

            var boardLi = $('<li>', {
                class: 'boardCard'
            }).appendTo($trelloBoards);

            var titleHeader = $('<div>', {
                class: 'boardHeader',
                html: '<h3>' + boardName + '</h3>'
            }).appendTo(boardLi);

            var progressBar = $('<progress>', {
                value: 10,
                max: 100,
                class: 'boardProgress'
            }).appendTo(boardLi);

            //get all the cards for a specific board
            Trello.get("boards/" + boardID + "/cards", function (cards) {

                $.each(cards, function (index, card) {
                    var boardItemsChecked = card.badges.checkItemsChecked,
                        boardTotalItems = card.badges.checkItems;

                    //here I need to display the total number of complete
                    // and incomplete checklist tasks for each board  

                });
            });

This is the closest I'm able to get. It shows multiple progress bars (one for each card that exists on the board). The problem is I need a total checked out of all checkItems for the board:

Trello.get("boards/" + boardID + "/cards", function(cards) {

                $.each(cards, function(ix, card) {

                    var checked = card.badges.checkItemsChecked,
                        totalChecks = card.badges.checkItems;

                    var totalChecked = 0;
                    totalChecked = totalChecked + checked;

                    var sumTotalChecks = 0;
                    sumTotalChecks = sumTotalChecks + totalChecks;

                     var progressBar = $('<progress>', {
                        value: totalChecked,
                        max: sumTotalChecks,
                        class: 'boardProgress'
                    }).appendTo(titleHeader);
                });
            });
Was it helpful?

Solution

Here's the solution:

    Trello.get("boards/" + boardID + "/cards", function(cards) {

                var totalChecked = 0, 
                totalExisting = 0;

                $.each(cards, function(ix, card) {

                    var checked = card.badges.checkItemsChecked,
                        totalChecks = card.badges.checkItems;

                        totalChecked += checked;
                        totalExisting += totalChecks;

                        $('progress' + "#" + boardID).attr({
                            value: totalChecked,
                            max: totalExisting
                        });
                });
            });
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top