jquery how to fill up an array

Question

i am in mobile app and i want to fill up an array with values from checkboxes.

my code is

if (row.flatdescription == flatdescription) {
    if (row.receiptno == 0){
        items.push('<input type="checkbox" name="code_'+ i +'" id="code_'+ i +'" value="' + row.amount + '" previous="' + row.pastpayments + '" barcode="' + row.barcode + '" todayp="' + row.todaypayments + '"/><label for="code_'+ i +'">' + row.period +'..........'+ row.amount+'</label></br>');
    }
    allbarcode[i] = row.barcode;
    previouspayments1 = previouspayments1 + row.pastpayments;
    previouspayments = previouspayments1.toFixed(2);
    sofeilon1 = sofeilon1 + row.amount;
    sofeilon = sofeilon1.toFixed(2);
    total1 = total1 + row.amount - row.pastpayments;
    total = total1.toFixed(2);
}

and my array code

function barcodeTotal() {
    barcode = [];
    barcodeamount = [];
    barcodeprevious = [];
    $("input:checked").each(function(i) {
        barcode[i] = $(this).attr("barcode");
        barcodeamount[i] = $(this).attr("value");
        barcodeprevious[i] = $(this).attr("previous");
    });
}

my goal is to fill barcode array like this

barcode [barcode: barcode, amount: value, previous: previous, ....

i will appreciate your answers

Solution 1

You can transform your checked input fields into an array easily:

var checkedInputs = $("input:checked") // this contains the raw HTML-Elements

Now, depending on the desired result you may either harvest the values separately

var barcodes  = checkedInputs.map(function() { return $(this).attr('barcode')  })
var amounts   = checkedInputs.map(function() { return $(this).attr('amount')   })
var previouss = checkedInputs.map(function() { return $(this).attr('previous') })

or, what might be even better, as objects just like twilson suggested

var results = checkedInputs.map(function() {
  return {
    barcode:  $(this).attr('barcode'),
    amount:   $(this).attr('amount'),
    previous: $(this).attr('previous')
  }
})

In this case you want the this to be taken from inside of the function call, as it refers to the object, you matched with the $('input:checked') call. If you store var self = this as twilson suggested, you would not receive the actual values of the input box, but no values, as the this of the calling context is most likely not an HTMLElement at all.

Solution 2

You would be best served with an array of objects, rather than just an array.

var self = this; // Important because 'this' may change in scope.
var barcodes = []

$("input:checked").each(function(index, item) {
    barcodes.push({
        barcode: $(self).attr("barcode"),
        amount: $(self).attr("value"),
        previous: $(self).attr("previous")
    });
});

You will then end up with an array something like this:

[
    { barcode: "5049383", amount: "4", previous: "17263742" },
    { barcode: "5049389", amount: "1", previous: "1726376" }
]

1. Put the var keyword before your variables inside the function otherwise they will are global.
2. var self = this; is generally good practice when calling additional functions because the scope of this can change quite a bit depending upon your point of execution, usually to become the main jQuery object. self give you that pointer back to what you expect to be talking to.

Comments

[kosbou]

i make the suggested changes but i receive in alert [object Object],[object Object] function barcodeTotal() { var self = this; var barcodes = []; $("input:checked").each(function(i, item) { barcodes.push({ barcode : $(self).attr("barcode"), amount : $(self).attr("value"), previous : $(self).attr("previous") }); //barcode[i] = $(this).attr("barcode"); //barcodeamount[i] = $(this).attr("value"); //barcodeprevious[i] = $(this).attr("previous"); }); alert(barcodes); }