Merge multiple serializeobject to one?

Question

is it possible to merge multiple serializeobject to one serializeobject? I will be using it in a post. The serializeobjects are created via for loop.

var data = [];
for (var i = 0; i < riid_count; i++) {
  data[i] = $('input[type=checkbox][data-record='+i+']').serializeObject();
  data[i].id = $('input[name=id][data-record='+i+']').val();
  console.log(data[i]);
}

$.ajax({
  url : '<?php echo base_url() . 'index.php/unsubscribe/submit' ?>',
  data: data (hopefully access the merged objects),
  method: "POST",
  processData: true,
  dataType: 'json',
  error: function(xhr, status, thrown)
  {
  // i have stuff here
  },
  success: function(data)
  {
  // i have stuff here
  }
});

And here is an example of how the <form> element could look:

<form>
  <input type="checkbox" data-record="0" class="selection" name="somename"> 
</form>

Depending on the data I get from the database there can be up to 10 (or even more) checkboxes.

"There is serialize() and serializeArray() but no serializeObject().", see here: https://forum.jquery.com/topic/serializeobject — Carsten Massmann, Jun 23 '20 at 11:23
I was able to to use serializeObject though. here's how the output looks like: `Object { field1: "on", field2: "on", id: "12345" }`. Does that mean I shouldn't use that? — thebeast22, Jun 23 '20 at 11:30
serializeObject is a new JavaScript version of the functionality previously found in jQuery: see here: https://stackoverflow.com/a/17488744/2610061 — Carsten Massmann, Jun 23 '20 at 11:32
cool. so is there a way to merge it? Like if I have 3 objects, I wanted to combine it to just one — thebeast22, Jun 23 '20 at 11:36
Can you show us your HTML? I have the feeling that we can collect your data much more easily by applying the jQuery `.serializeArray()` function on the surrounding `
` element (without the need for any loop!). — Carsten Massmann, Jun 23 '20 at 12:11
@cars10m here's how my form looks like `

` the inputs are being populated multiple times via loop depending on what I get from database; so I might get inputs from data-record="0" - data-record="10" I tried serializeArray but still wasn't able to combine them — thebeast22, Jun 24 '20 at 05:23
I edited your question accordingly. But it seems strange to me that there is still no element matching your `'input[name=id]...'` selector. And: will each `name`-attribute be unique or are they all the same? — Carsten Massmann, Jun 24 '20 at 06:11
Thanks @cars10m! The element name will be the same whenever it loops. — thebeast22, Jun 25 '20 at 03:00

score 1 · Accepted Answer · answered Jun 23 '20 at 12:29

I still have no idea what your HTML might look like and what optimizations we could still carry out. But the following collects the input fields of those elements following a "checked" checkbox. Maybe it is of some help to you?

function collectData(){
  var data = [];
  for (var i = 0; i < 7; i++) {
    data[i] = $('input[type=checkbox][data-record='+i+']').serializeArray();
    if (data[i][0]) data[i][0].id = $('input[name=id][data-record='+i+']').val();
  // console.log(data[i]);
  }
  let da=data.filter(e=>e.length).map(e=>e[0]);
  console.log(da)
}
$('button').click(collectData);

input[type=text] {width:25px}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<input type="checkbox" data-record="0" name="zero" value="zero">
<input type="text" data-record="0" name="id" value="000">
<input type="checkbox" data-record="1" name="one" value="un">
<input type="text" data-record="1" name="id" value="111">
<input type="checkbox" data-record="2" name="two" value="dos" checked>
<input type="text" data-record="2" name="id" value="222">
<input type="checkbox" data-record="3" name="three" value="tres">
<input type="text" data-record="3" name="id" value="333">
<input type="checkbox" data-record="4" name="four" value="cuatro" checked>
<input type="text" data-record="4" name="id" value="444">
<input type="checkbox" data-record="5" name="five" value="cinquo">
<input type="text" data-record="5" name="id" value="555">
<input type="checkbox" data-record="6" name="six" value="seis">
<input type="text" data-record="6" name="id" value="666">
</form>
<button> send </button>

Merge multiple serializeobject to one?

1 Answers1