Return array () in jQuery

Navigation
2

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 this way, I can not return the objects of the array, 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
                )

        )

)
    
asked by anonymous 01.12.2016 / 21:06

1 answer

2

You can change HTML to have name simple, like the keys of the objects you want in the array. And then you can fetch the contents to generate the array like this: 

var array = $('tr:has(input)').filter(function() {
    return $('[type="checkbox"]:checked', this).length;
}).map(function() {
    return $('input', this).get().reduce(function(obj, input) {
        obj[input.name] = input.value;
        return obj;
    }, {});
}).get();

An example would be ( jsFiddle ): 

var array = $('tr:has(input)').filter(function() {
    return $('[type="checkbox"]:checked', this).length;
}).map(function() {
    return $('input', this).get().reduce(function(obj, input) {
        obj[input.name] = input.value;
        return obj;
    }, {});
}).get();

console.log(JSON.stringify(array));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><table><tbody><tr><thwidth="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="data_vencimento" id="itens[data_vencimento][]">
            </td>
            <td width="50" class="text-center">
                <input type="checkbox" name="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="data_vencimento" id="itens[data_vencimento][]">
            </td>
            <td width="50" class="text-center">
                <input type="checkbox" name="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="data_vencimento" id="itens[data_vencimento][]">
            </td>
            <td width="50" class="text-center">
                <input type="checkbox" name="item" id="itens[item]" class="array_teste" value="85,00|3">
            </td>
        </tr>
    </tbody>
</table>
    
01.12.2016 / 22:52
Erase options within optgroup When changing a Model, how to redo Scaffolding?