Jquery how to fill an array

Question

I am in a mobile application and I want to populate an array with values ​​from checkboxes.

my code

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

 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 populate a barcode array like this

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

I will be grateful for your answers

Answer 1

You can easily convert the entered input fields to an array:

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

Now, depending on the desired result, you can either collect 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, which might be even better, since objects 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 this be taken from inside a function call, since it refers to an object, you are matched with a call to $('input:checked') . If you store var self = this as suggested by twilson, you will not get the actual values ​​of the input field, but no values, since this calling context is most likely not an HTMLElement at all.

Answer 2

It is best to use an array of objects, not 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") }); }); 

Then you will get an array like this:

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

• Place the var keyword in front of your variables inside the function, otherwise they will be global.
• var self = this; This is usually a good practice when calling additional functions, because the scope of this can vary greatly depending on your execution point, usually in order to become the main jQuery object. self returns the pointer back to what you expect from communication.

Answer 3

It will help you

 var arrBarCodeDet = new Array(); var objCheckedElem = $("input:checked"); $.map(objCheckedElem,function(elem,index){ /** Result As Object arrBarCodeDet[index] = [{'barcode':$(elem).attr("barcode")},{'barcodevalue':$(elem).attr("barcodevalue")}]; */ //Result As Arrray arrBarCodeDet[index] = new Array(); arrBarCodeDet[index]['barcode'] = $(elem).attr("barcode"); arrBarCodeDet[index]['barcodevalue'] = $(elem).attr("barcodevalue"); }) 

});

 <input type="checkbox" name="check1" value="1" checked="checked" barcode="12233" barcodevalue="12" />Check Box 1 <br /> <input type="checkbox" name="check2" value="1" checked="checked" barcode="45451" barcodevalue="24" />Check Box 2 <br /> <input type="checkbox" name="check3" value="1" checked="checked" barcode="34343" barcodevalue="36" />Check Box 3 <br /> <input type="checkbox" name="check4" value="1" barcode="32333" value="48" />Check Box <br /> 

The result will be arrBarCodeDet [Array [0] barcode: "12233" barcodevalue: "12" length: 0 Proto : array [0], Array [0] barcode: "45451" barcodevalue: "24" length: 0 Proto : array [0], Array [0] barcode: "34343" barcodevalue: "36" length: 0 Proto : array [0]]