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

Barmar · Accepted Answer · 2017-09-30 15:44:47Z

3

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

answered Sep 30, 2017 at 15:44

Barmar

789k57 gold badges554 silver badges669 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Arthur · Accepted Answer · 2017-09-30 15:43:33Z

1

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

answered Sep 30, 2017 at 15:43

Arthur

5,1783 gold badges37 silver badges65 bronze badges

2 Comments

4 Leave Cover Over a year ago

Yes you are right. One more question, how to access the array? console.log(localStorage.getItem(mykey)[0]); ?

Arthur Over a year ago

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 stackoverflow.com/questions/22991871/localstorage-save-array/…

Collectives™ on Stack Overflow

javascript multiple array into json

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related