Как добавить новые элементы в объект jQuery, который уже содержит некоторые элементы

Question

supplieritemdata - мой объект, а data - массив. Я хочу добавить элементы к объекту, поскольку флажок установлен как находящийся в true.

Моя проблема заключается в том, что объект содержит только последние предоставленные ему значения, а не все значения. Я хочу сохранить все значения.

var supplieritemdata = {},
  data = [];

$('#tbl1 > tbody  > tr').each(function(index, tr) {
  debugger
  // var row = $(this).closest("tr");
  var ch = $(this).find(".check").prop("checked");
  if (ch) {
    supplieritemdata.SupplierId = $('#ddlsupplierdetails').val();
    supplieritemdata.ItemCategoryId = $('#ddlcategory').val();
    supplieritemdata.ItemGroupId = $('#ddlgroup').val();
    supplieritemdata.ItemId = $(this).find(".label-info").html();
  }

  data.push(supplieritemdata);
  //supplieritemdata = null;
  // $(this).prop("checked")
  // $this.find("input.name").val();
});

Answer 1

Проблема в том, что в итерации вы изменяете одну и ту же ссылку от до supplieritemdata. Это означает, что, хотя вы добавили эту переменную в массив data, установите ее на null или измените ее свойства, это повлияет на экземпляр, хранящийся в массиве. Таким образом, вы перезаписываете свойства одного объекта на каждой итерации l oop. Вот почему отображаются только последние значения.

Чтобы исправить это, вам нужно создать новый объект в каждой итерации l oop.

Также обратите внимание, что logi c можно сделать более лаконичным, только выбрав tr элементы, которые отмечены флажком (чтобы убрать необходимость в if), и другие с помощью map(). Попробуйте это:

var data = $('#tbl1 > tbody  > tr:has(:checkbox:checked)').map(function() {
  return {
    SupplierId: $('#ddlsupplierdetails').val(),
    ItemCategoryId: $('#ddlcategory').val(),
    ItemGroupId: $('#ddlgroup').val(),
    ItemId: $(this).find(".label-info").html()
  }
}).get();

console.log(data);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="ddlsupplierdetails" value="ddlsupplierdetails" />
<input type="text" id="ddlcategory" value="ddlcategory" />
<input type="text" id="ddlgroup" value="ddlgroup" />
<input type="text" id="ddlsupplierdetails" value="ddlsupplierdetails" />

<table id="tbl1">
  <tbody>
    <tr>
      <td><input type="checkbox" class="check" checked="true" /></td>
      <td><span class="label-info">Foo bar 1</span></td>
    </tr>
    <tr>
      <td><input type="checkbox" class="check" /></td>
      <td><span class="label-info">Foo bar 2</span></td>
    </tr>
    <tr>
      <td><input type="checkbox" class="check" checked="true" /></td>
      <td><span class="label-info">Foo bar 3</span></td>
    </tr>
  </tbody>
</table>