Преобразуйте serialize () в массив объектов для отправки на контроллер

Question

Я использую Datatables. У меня есть таблица с несколькими входами, и я хочу отправить массив объектов в контроллер через ajax.

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

Результат:

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

Я предполагаю, что мне нужно разбивать строку в каждую секунду '&', а затем снова разбивать. Вопрос в том, является ли это единственным способом преобразования его в массив объектов?

Я хочу получить массив объектов:

[{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>

Спасибо!

Answer 1

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

Для этого вы можете выбратьЗатем родительские элементы tr используют map() для создания объектов.Единственное изменение HTML, которое упростило бы его, - это добавление общих классов к элементам input.Как то так:

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>