Convert serialize() to array of objects to post to controller

Question

I am using Datatables. I have a table with multiple inputs and I want to post array of objects to controller via ajax.

var data = table.$('input, select').serialize();

The result:

row-1-location=123&row-1-lot=231545&row-2-location=2323&row-2-lot=5523&row-3-location=23232&row-3-lot=23235

I am assuming I need to split the string at every second '&', then split again. The question is, is this the only way to convert it to array of objects?

The result I want is array of objects:

[{location : 123, lot: 231545}, {location: 2323, lot: 5523}......]

HTML:

<tbody>
    <tr role="row" class="odd">
        <td><input type="text" id="row-5-location" name="row-5-location" value=""></td>
        <td><input type="text" id="row-5-lot" name="row-5-lot" value=""></td>
    </tr>
    <tr role="row" class="even">
        <td><input type="text" id="row-6-location" name="row-5-location" value=""></td>
        <td><input type="text" id="row-6-lot" name="row-5-lot" value=""></td>
    </tr>
</tbody>

Thanks!

In this: post array of objects to controller. do you mean POST as in "to controller on server via HTTP"? If so, then data simply becomes the BODY of your POST request. — Randy Casburn
– Randy Casburn, Commented May 29, 2019 at 15:00
It would make more sense to just build the array of objects directly from the DOM elements. If you can show us what the HTML looks like I'm sure we can give you an example of how to do that — Rory McCrossan
– Rory McCrossan, Commented May 29, 2019 at 15:04

Rory McCrossan · Accepted Answer · 2019-05-29 15:14:11Z

1

To create the array of objects you require it would make more sense to just build the structure from the DOM directly instead of serialising it, then picking apart the resulting string.

To achieve this you can select the parent tr elements then use map() to build the objects. The only HTML change which would make it simpler still would be to put common classes on the input elements. Something like this:

var arr = $('table tr').map(function() {
  var $tr = $(this);
  return {
    location: $tr.find('.location').val(),
    lot: $tr.find('.lot').val()
  }
}).get();

console.log(arr);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr role="row" class="odd">
      <td><input type="text" class="location" id="row-5-location" name="row-5-location" value="123"></td>
      <td><input type="text" class="lot" id="row-5-lot" name="row-5-lot" value="231545"></td>
    </tr>
    <tr role="row" class="even">
      <td><input type="text" class="location" id="row-6-location" name="row-5-location" value="2323"></td>
      <td><input type="text" class="lot" id="row-6-lot" name="row-5-lot" value="5523"></td>
    </tr>
  </tbody>
</table>

answered May 29, 2019 at 15:14

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Igor Levashov Over a year ago

There is one drawback in this approach. We can only get data from rows that presented in DOM. But if I use searchbox then I will not be able to get previously entered data.

Rory McCrossan Over a year ago

Potentially, but using serialize() has the same drawback as that is only populated from the DOM too.

Collectives™ on Stack Overflow

Convert serialize() to array of objects to post to controller

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related