Question

我使用本地存储来保存对象。我遇到的麻烦莫过于使用这个对象来填充表格。现在，该对象在第三列中显示为数组。如何使用json数组用对象中的值，键和图像填充第1列，第2列和第3列。

$(document).on('click', '[data-toggle=add]', function() {
    var latlng = $(this).data('latlng');
    var address = $(this).data('address');
    var image = $(this).data('image');
    var key = $(this).data('id');
    var testObject = {
      'latlng' : latlng,
      'address' : address,
      'image' : image
    };
    localStorage.setItem(key, JSON.stringify(testObject));
    updateTable();
});

function updateTable() {
    var tbody = document.getElementById("output");
    while(tbody.getElementsByTagName("tr").length > 0) {
       tbody.deleteRow(0);
    }
    var row;
    if(localStorage.length == 0) {
       row = tbody.insertRow(i);
       cell = row.insertCell(0);
       cell.colSpan = "4";
       cell.innerHTML = "Nothing to Show";
    }
    for(var i = 0; i < localStorage.length; ++i) {
        row = tbody.insertRow(i);
        cell = row.insertCell(0);
        cell.innerHTML = i;
        cell = row.insertCell(1);
        cell.innerHTML = localStorage.key(i)
        cell = row.insertCell(2);
        cell.innerHTML = localStorage.getItem(localStorage.key(i));
        cell = row.insertCell(3);
        cell.innerHTML = '<button class="btn btn-danger btn-sm" onclick="deleteItem(\'' + localStorage.key(i) + '\');"><i class="fa fa-trash-o"></i> Delete</button>';
    }
}

Answer 1

您尚未发布所有标记，但我相信这是您的问题：

您没有正确撤回localStorage。您正在保存JSON对象的字符串化版本，然后您尝试直接作为对象访问它。相反，您需要检索localstorage项并将其解析回JSON对象，然后遍历它或将其属性作为对象访问。

替换：

cell.innerHTML = localStorage.key(i);

使用：

json = JSON.parse(localStorage.key(i));

cell.innerHTML = json.latlng;// or json.address or json.image;

希望这有帮助！

使用json数组填充html表

1 个答案: