Данные не помещаются в массив

Question

Мне удалось отобразить данные JSON (локальный файл) в каждой строке в моей таблице, и когда установлен соответствующий флажок данных, я хочу поместить эти выбранные значения в массив. Конечная цель - отобразить массив в элементе div, но не раньше, чем я смог увидеть, что массив заполняется.

JS фрагмент:

($("#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

Я бы порекомендовал вам зафиксировать, установлен ли флажок. Вы можете проверить, есть ли элемент в массиве, взяв индекс данных.

Не уверен, как выглядит ваш HTML ...

(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>

Answer 2

Во-первых, ваша последняя строка всегда будет печатать пустой массив, потому что вы заполняете его только в обработчике событий.

Во-вторых, вы используете i < favesArr.length в качестве условия цикла.favesArr здесь еще пусто, если не заполнено другими частями кода.Тело цикла при этом никогда не выполняется.Вы, вероятно, хотели data.length здесь.

И последнее, но не менее важное: вы можете поместить только data[i], а не весь массив в ваш favesArray.