javascript multiple array into json

Question

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')" />

score 3 · Answer 1 · answered Sep 30 '17 at 15:44

Create an array of objects.

var array = [];
$('#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();

    array.push({
        checkbox: checkbox,
        itemcode: itemcode,
        amount: amount,
        reference: reference
    });

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

localStorage.setItem(mykey, JSON.stringify(array));

score 1 · Accepted Answer · answered Sep 30 '17 at 15:43

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])

Yes you are right. One more question, how to access the array? `console.log(localStorage.getItem(mykey)[0]);` ? — 4 Leave Cover, Sep 30 '17 at 17:09
Use `JSON.parse()` to transform the string (the array stringify) saved on localStrorage) into an array. Check an old answer I did here for more informations https://stackoverflow.com/questions/22991871/localstorage-save-array/22992002#22992002 — Arthur, Sep 30 '17 at 17:23

javascript multiple array into json

2 Answers2