javascript多个数组转换成json

Posted 2023-03-05

【中文标题】javascript多个数组转换成json

【英文标题】：javascript multiple array into json

【发布时间】：2018-03-12 06:17:30

【问题描述】：

如何将每个表格行及其各自的输入（复选框、文本、选择）放入一个数组中以存储在本地存储中？我已经完成了大部分代码，我需要构建的部分是 ????部分。谢谢。

这是javascript代码：

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

);

如果您想知道我如何动态生成表格行，这是输入按钮

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

【参考方案1】：

创建一个对象数组。

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

【参考方案2】：

我不知道我是否理解您的问题，但这有效吗？

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

如果您不想像 checkbox: true, itemcode: 'foo', ... 一样保存每个列，但要使用有序数组，则可以将新行替换为：

my_table.push([checkbox, itemcode ,amount, reference])

【讨论】：

是的，你是对的。还有一个问题，如何访问数组？ console.log(localStorage.getItem(mykey)[0]); ?

使用JSON.parse() 将保存在localStorage 上的字符串（字符串化数组）转换为数组。查看我在这里所做的旧答案以获取更多信息***.com/questions/22991871/localstorage-save-array/…