Data isn't getting pushed to array

Question

I've been able to display JSON data (local file) into each row in my table, and when the data's corresponding checkbox is checked I want to push those selected values into an array. The end goal is to display the array in a div, but not until I'm able to see that the array is being populated.

JS snippet:

($("#km-table-id tbody tr")).append($("<input />", {"type": "checkbox"}).addClass("checkbox-class"));

let table = $("#km-table-id").DataTable();
    let favesArr = [];

    $(".checkbox-class").on("click", "tr", function() {
      let data = table.row(this).data();
      for (var i = 0; i < favesArr.length; i++) {
        favesArr.push($(data).text());
        $("#myFave.hs-gc-header").append(favesArr[i]);
      }      
      console.log(data); // this was showing the selected data a short time ago, but not anymore  

    });

    console.log(favesArr); // only showing empty

Answer 1

First of all, your last line will always print an empty array because you are only filling it in an event handler.

Secondly, you are using i < favesArr.length as your loop condition. favesArr is empty here yet, if not filled in other parts of the code. The loop body thus is never executed. You probably wanted data.length here.

Last but not least, you may want to push only data[i] and not the whole array into your favesArray .

Answer 2

I would recommend that you capture whether the checkbox is checked. You can check if the item is already in the array by grabbing the data index.

Not sure what your HTML looks like...

 (function($) { $.fn.appendText = function(text) { return this.text(this.text() + text); }; $.fn.appendHtml = function(html) { return this.html(this.html() + html); }; })(jQuery); const $table = $('#km-table-id'); $table.find('tbody tr').append($("<input>", { type: 'checkbox', class : 'checkbox-class'})); let table = $table.DataTable(); let favesArr = []; $table.on('click', '.checkbox-class', function(e) { let data = table.row(this.parentNode).data(), checked = $(this).is(':checked'), dataIndex = favesArr.indexOf(data); if (checked) { if (dataIndex === -1) { favesArr.push(data); // Add item } } else { if (dataIndex > -1) { favesArr.splice(dataIndex, 1); // Remove item } } $('#myFave.hs-gc-header').appendHtml('>> ' + favesArr.map(x => x.join(', ')).join('; ') + '<br/>'); }); 

 body { background: #666; } .table-wrapper { background: #fff; width: 80%; margin: 0 auto; margin-top: 1em; padding: 0.25em; } #myFave.hs-gc-header { background: #fff; width: 81%; margin: 0 auto; margin-top: 0.5em; height: 5em; overflow: scroll; } 

 <link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script> <div class="table-wrapper"> <table id="km-table-id"> <thead> <tr> <th>A</th><th>B</th><th>C</th> </tr> </thead> <tbody> <tr> <td>1</td><td>2</td><td>3</td> </tr> <tr> <td>4</td><td>5</td><td>6</td> </tr> <tr> <td>7</td><td>8</td><td>9</td> </tr> </tbody> </table> </div> <div id="myFave" class="hs-gc-header"></div>