Search code examples
javascriptjqueryprogress-bareachtrello

How to total results from an .each loop? A total checklist board count from individual checklist cards


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);
                });
            });

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
                            });
                    });
                });