Использование массива json для заполнения таблицы html

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

Вы не отправил всю разметку, но я считаю, что это ваша проблема:

Вы не retreiving 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; 

Надеется, что это помогает!