This javascript keeps printing data in a loop when parsing a csv file

Question

I am successfully parsing, filtering and printing a CSV file using Papa Parse and jQuery. Unfortunately I seem to have managed to set up some sort of loop where the output keeps printing to the webpage.

Code is as below, I know it's probably something obvious but have been working on this for a while now and just can't see for looking!

function organize(data) {
    var finalLpc = [];

    data.forEach(function(branch) {
        if (branch.BranchNo == 1515) {
            finalLpc.push(branch);
        }

        var $tableBody = $('<tbody></tbody>');
        for (var i = 0; i < finalLpc.length; i++) {
            var branch = finalLpc[i];
            var $row = $('<tr></tr>');
            $row.append($('<td></td>').text(branch.Area));
            $row.append($('<td></td>').text(branch.LPC));
            $tableBody.append($row);
        }

        $('thead').after($tableBody);
    });
}

function parseData(url, callBack) {
    Papa.parse(url, {
        download: true,
        header: true,
        dynamicTyping: true,
        complete: function(results) {
            callBack(results.data);
        }
    });
}

parseData("lpc.csv", organize);

Any help would be greatly appreciated. I have used examples on here to get where I am now.

Note that you are pushing data into `finalLpc` only when the `BranchNo == 1515`, but outputting the `$tableBody` whether or not you've pushed to `finalLpc`. That will reprint the entire `finalLpc` array for every item in `data`. You probably want to move the `$tableBody` stuff out of the `data.forEach` loop. — Heretic Monkey, Jul 19 '16 at 14:57
Hi Mike, thanks, I just notived that, it's amazing what a few missing curly braces and commas can do, I've been cross-eyed looking at it, it's fixed now so I'll post the solution below for others. — John Brindle, Jul 19 '16 at 15:36
No problem. I'm going to suggest we close this question, as it is unlikely anyone is going to have the same issue again. — Heretic Monkey, Jul 19 '16 at 15:39

score 0 · Answer 1 · edited Jul 19 '16 at 15:45

I have managed to fix this and am sharing the answer for posterity, thanks to Mike McCaughan for pointing me in the right direction.

        function organize(data) {

        var finalLpc = [];

        data.forEach(function(branch){
            if (branch.BranchNo == 1197) {
                finalLpc.push(branch);
            }
            });

            var $tableBody = $('<tbody></tbody>');
            for (var i = 0; i < finalLpc.length; i++) {
                var branch = finalLpc[i];
                var $row = $('<tr></tr>');
                $row.append($('<td></td>').text(branch.Area));
                $row.append($('<td></td>').text(branch.BranchName));
                $row.append($('<td></td>').text(branch.LPC));
                $tableBody.append( $row );
            }

            $('thead').after($tableBody);
    }



    function parseData(url, callBack) {
    Papa.parse (url, {
        download: true,
        header: true,
        dynamicTyping: true,
        complete: function(results) {
        callBack(results.data);
        }
    });
}

parseData("lpc.csv", organize);

This javascript keeps printing data in a loop when parsing a csv file

1 Answers1