Return array() in jQuery

Asked

Viewed 288 times

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’s 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’t get the return of the array objects, which should return in the following way:

[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. Inside salvar_festa in PHP, I 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
                )

        )

)
jquery

  • Can you explain better "the return of this array, comes maladjusted"? maybe with an example of what you have and how you wanted it to stay?

  • 1

    Yes I can Sergio, I’ll rephrase so you can understand better.

  • I edited it, I think it’s better for you to understand.

  • Can HTML be changed? if you are using jQuery to generate the array to be sent by ajax not using name logic like name="itens[0][data_vencimento]"

  • Yes, because HTML is generated by a loop in PHP.

  • Perfect, however, equally, my return is still name,value, however, precise either return item and date... as the array I posted

  • 1

    Is this what you want? -> https://jsfiddle.net/vsroLu9m/1/

  • It wouldn’t be, it repeats the arrays()

  • You’re right, there was a bug: https://jsfiddle.net/vsroLu9m/2/

Show 4 more comments

1 answer

2


You can change the HTML to have the 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 like this (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>
            <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="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>

  • Yes, there is only one however, it can only return me those that have been checked and filled out, because it is a choice option of the user, it selects what he will want at his party. In this case.

  • 1

    @Andrébaill ah, I see... so that would be: https://jsfiddle.net/vsroLu9m/3/

  • 1

    Perfect this way @Sergio, the only thing I removed, was not to return in Json, because I will treat the return via PHP, for inclusion in the database, but too, that’s right. Thank you so much! It worked!

  • 1

    If you can, just edit by putting your answer that you posted to jsfiddle, ;)

  • 1

    @Andrébaill made!

Browser other questions tagged jquery

You are not signed in. Login or sign up in order to post.