4 Leave Cover 4 Leave Cover - 3 years ago 168
HTML Question

javascript multiple array into json

How to get each table row and its respective inputs (checkbox, text, select) into an array to store in localstorage? I've complete most of the code, the part I need to build is the ???? part. Thanks.

This is the javascript code:

function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var colCount = table.rows[0].cells.length;
for(var i=0; i<colCount; i++) {
var newcell = row.insertCell(i);
newcell.innerHTML = table.rows[0].cells[i].innerHTML;

}
}

$('#btnSave').on('click', function(e) {
e.preventDefault();
var id = $(this).attr("data-id");
var mykey = 'set'+id;

// here just to check whether 'set'+id exist or not, no validation performed
if(localStorage.getItem(mykey)==null){
console.log('key not found');
} else {
console.log('key found');
}

// Due to there will be one or more rows,
// need to loop the rows and get the inputs within
// and store them in localstorage
$('#dyn_table tr').each(function(){
var tr = $(this);
var checkbox = $(this).find('.big-checkbox').is(':checked');
var itemcode = $(this).find('.dyn_item_code :selected').val();
var amount = $(this).find('.dyn_amount').val();
var reference = $(this).find('.dyn_reference').val();

console.log(checkbox);
console.log(itemcode);
console.log(amount);
console.log(reference);
});

localStorage.setItem(mykey, ????);

});


This is the input button if you wonder how i dynamically generate the table row

<input type="button" value="Add row" onClick="addRow('dyn_table')" />

Answer Source

I didn't know if I understood your problem but this is working ?

var my_table = [] // Create an array for the table

$('#dyn_table tr').each(function(){
    var tr = $(this);
    var checkbox = $(this).find('.big-checkbox').is(':checked');
    var itemcode = $(this).find('.dyn_item_code :selected').val();
    var amount = $(this).find('.dyn_amount').val();
    var reference = $(this).find('.dyn_reference').val();

    // For each row, create a item on the array, containing all important data for the row
    my_table.push({checkbox, itemcode ,amount, reference})       
});

console.log("My table :", my_table)
localStorage.setItem(mykey, JSON.stringify(my_table));

If you don't want to save each col like: {checkbox: true, itemcode: 'foo', ...} but have an ordered array instead, you can replace the new line by:

my_table.push([checkbox, itemcode ,amount, reference])
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download