Return array () in jQuery

Question

I have the following HTML list

<table class="table table-bordered">
 <tbody>
 <tr>
 <th width="50" class="text-center">#</th>
 <th>Item do Pacote</th>
 <th>Valor</th>
 <th>Vencimento</th>
 <th width="50" class="text-center"></th>
 </tr>
 <tr>
 <td width="50" class="text-center">1</td>
 <td>Salgados - 100 Un</td>
 <td>R$ 150,00</td>
 <td width="200px">
 <input type="date" class="form-control" name="itens[0][data_vencimento]" id="itens[data_vencimento][]"> 
 </td>
 <td width="50" class="text-center"><input type="checkbox" name="itens[0][item]" id="itens[item]" class="checados" value="150,00|1"></td>
 </tr>
 <tr>
 <td width="50" class="text-center">2</td>
 <td>Doces - 100 Un</td>
 <td>R$ 114,00</td>
 <td width="200px">
 <input type="date" class="form-control" name="itens[1][data_vencimento]" id="itens[data_vencimento][]"> 
 </td>
 <td width="50" class="text-center"><input type="checkbox" name="itens[1][item]" id="itens[item]" class="checados" value="114,00|2"></td>
 </tr>
 <tr>
 <td width="50" class="text-center">3</td>
 <td>Refrigerante - 10 un</td>
 <td>R$ 85,00</td>
 <td width="200px">
 <input type="date" class="form-control array_teste" name="itens[2][data_vencimento]" id="itens[data_vencimento][]"> 
 </td>
 <td width="50" class="text-center"><input type="checkbox" name="itens[2][item]" id="itens[item]" class="array_teste" value="85,00|3"></td>
 </tr>
 </tbody>
</table>

I need to retrieve all this data that is inside the fields, through a jQuery. I tried to do it this way:

$("#salvar_festa").click(function() {
 var itens = $(".array_teste").serializeArray();
 $.ajax({
 url: basePath + 'evento/salvar_festa',
 type: 'POST',
 dataType: 'html',
 data: {
 itens: itens
 },
 })
 .done(function(ret) {
 console.log("success");
 $('#mensagePage').html(ret);
 }); 
});

But in this way, I can not return the array objects, which should return as follows:

[item] => Array
 (
 [0] => Array
 (
 [data_vencimento] => 2016年12月05日
 [itens] => 150,00|1
 )
 [1] => Array
 (
 [data_vencimento] => 2016年12月07日
 [itens] => 114,00|2
 )
 [2] => Array
 (
 [data_vencimento] => 2016年12月22日
 [itens] => 85,00|3
 ) 
 )

But I have no idea how to resolve this issue. Within the save_fest in PHP, I then have print_r ($_POST);

My return via print_r ($_POST):

Array
(
 [itens] => Array
 (
 [0] => Array
 (
 [name] => itens[0][data_vencimento]
 [value] => 2016年12月01日
 )
 [1] => Array
 (
 [name] => itens[0][item]
 [value] => 150,00|1
 )
 [2] => Array
 (
 [name] => itens[1][data_vencimento]
 [value] => 2016年12月01日
 )
 [3] => Array
 (
 [name] => itens[1][item]
 [value] => 114,00|2
 )
 [4] => Array
 (
 [name] => itens[2][data_vencimento]
 [value] => 2016年12月01日
 )
 [5] => Array
 (
 [name] => itens[2][item]
 [value] => 85,00|3
 )
 )
)

• Carcigenicate: What? Please reword your question. It's very unclear what you're asking.
• Sr. André Baill: I need to retrieve this data through a jQuery, and pass via PHP to a $_POST.
• Carcigenicate: OK. And what problem are you running into?
• Sr. André Baill: I have edited the question, please help me.

Answer 1

you could use .serialize() http://jqapi.com/#p=serialize

not .serializeArray() http://jqapi.com/#p=serializeArray

the difference is: if you use .serializeArray() you need to iterate through them to get the correct value and this function is usually for debugging only (unless you really need it for some reason)