Incorrect javaScript Loop

2

I have the following code:

var contador = 1;
$('.preview-add-button').click(function(){
    var form_data = {};
    //form_data["concept"] = $('.payment-form input[name="concept"]').val();
    //form_data["description"] = $('.payment-form input[name="description"]').val();
    form_data["status"] = $('.payment-form #status option:selected').text();
    form_data["amount"] = parseFloat($('.payment-form input[name="amount[]"]').val()).toFixed(2);
    //form_data["date"] = $('.payment-form input[name="date"]').val();
    form_data["remove-row"] = '<span class="ico-cancel"></span>';
    var row = $('<tr></tr>');
    $.each(form_data, function( type, value ) {
        $('<td class="input-'+type+'"></td>').html(value).appendTo(row);
        $('<input/>').attr("type", "hidden").attr("name", "produto[]").val(form_data["status"]).appendTo(row);
        $('<input/>').attr("type", "hidden").attr("name", "produto[]").val(form_data["amount"]).appendTo(row);
        contador++;
    });
    $('.preview-table > tbody:last').append(row);
    calc_total();
});

The problem is in the counter variable, instead of counting from 1 to 1 as it is in the code, when going through the loop it was sum 3 instead of 1, that is, it arrives in the loop with 1 and in the next iteration is 4, the next 7 and so on, can anyone understand why?

    
asked by anonymous 08.08.2015 / 18:13

2 answers

0

form_data contains 3 attributes: status , amount , remove-row
$.each executes the function once for each element of form_data

So he's counting 3 times.

If you want to count the number of clicks with contador , you must leave contador++ out of $.each

    
08.08.2015 / 19:32
0

each is an iteration to the contents of a list; in this case, an iteration to what is inside form_data - which you are defining with 3 things: status , amount and remove-row ; Now a% of what he does is go through one of these properties to do anything.

The reason for the% variable with% is each is because contador iterated by 4 properties that each had and added to its initial value, which was 3 .

Instead of doing a form_data (read "each item in the following list"), I think you want to add what's inside that object to another element. If so, you can not use 1 and you can directly use the property:

$('.preview-add-button').click(function(){
    var formData = {};
    var row = $('<tr></tr>');
    formData.form = $('.payment-form');

    formData.status = $('#status option:selected',formData.form).text();
    formData.amount = parseFloat($('input[name="amount[]"]',formData.form).val()).toFixed(2);
    formData.removeRow = '<span class="ico-cancel"></span>';

    row.append('<td class="input-status">' + formData.status + '</td>');
    row.append('<td class="input-amount">' + formData.amount + '</td>');
    row.append('<td class="input-remove-row">' + formData.removeRow + '</td>');

    row.append('<input type="hidden" name="produto[status]" value="' + formData.status + '"');
    row.append('<input type="hidden" name="produto[amount]" value="' + formData.amount + '"');

    $('.preview-table > tbody:last').append(row);

});
    
08.08.2015 / 21:52