如何用数据数组填充HTML表？

Question

I'm building a table with HTML and then have created a function which allows me to select a cell. I also have a text field, with a function which will both change the innerText of the cell to the value in the text field and push that value into an array of the data in each table cell. I am then saving it to localStorage.

Here I encounter my error: how can I properly retrieve the data from the localStorage variable and repopulate the table with the values in the array?

Here's my code

omitting the table creation, textEntering, functions because they appear to be working fine

function save() {
  localStorage.setItem("tblArrayJson", JSON.stringify(tblArray));
  document.getElementById("lblInfo").innerHTML = "Spreadsheet saved.";
}

This is working because in a test function I can print the tblArrayJson in an alert. Next I am trying to load the data back to the table:

function loadSheet() {
  var loadedData = JSON.parse(localStorage.getItem("tblArrayJson"));
  var loadedTable = document.getElementById("SpreadsheetTable");
  var currRow, cell;
  alert("the retrieved JSON string contains: " + loadedData);

  for (var i = 0; currRow = loadedTable.rows[i]; i++) {
    for (var j = 0; cell = currRow.cells[j]; j++) {
      cell.innerHTML = loadedData.shift();
    }
  }
}

The alert displaying the loadedData is working correctly. So what is it about my loop that is failing to insert the array values back into the table? They just stay blank.

Is there a problem with the way I'm using the function? Here is my button with the onclick:

<input id="btnLoad" type="button" onclick="loadSheet();" value="Load" />

Answer 1

localStorage is an object .

A loop through an object for(var key in object) {} is different to a loop through an array for(var i = 0; i < arr.length; i += 1) {} .

If the data looks like

var loadedData = {
    0: ["cell1", "cell2", "cell3"],
    1: ["cell1", "cell2", "cell3"]
}

the loops should look like

for(var key in loadedData) {
    var row = loadedTable.insertRow();
    for(var i = 0; i < loadedData[key].length; i += 1) {
        var cell = row.insertCell(i);
        cell.innerHTML = loadedData[key][i];
    }
}

Example

 var loadedData = { 0: ["cell1", "cell2", "cell3"], 1: ["cell1", "cell2", "cell3"] } function loadSheet() { //var loadedData = JSON.parse(localStorage.getItem("tblArrayJson")); var loadedTable = document.getElementById("SpreadsheetTable"); for (var key in loadedData) { var row = loadedTable.insertRow(); for (var i = 0; i < loadedData[key].length; i += 1) { var cell = row.insertCell(i); cell.innerHTML = loadedData[key][i]; } } } loadSheet(); 

 <table id="SpreadsheetTable"></table> 

Answer 2

Your for loop is missing the terminating condition. I added that to mine, you're free to modify to fit your needs.

 var data = { 0: ["cell1", "cell2", "cell3"], 1: ["cell4", "cell5", "cell6"] }; // localStorage.tblArrayJson = JSON.stringify(loadedData); function loadSheet() { // var data = JSON.parse(localStorage.tblArrayJson); var table = document.getElementById("SpreadsheetTable"); var row, cell; // Used Object.keys() to get an array of all keys in localStorage for (var key of Object.keys(data)) { row = table.insertRow(); for (var i = 0; i < data[key].length; i++) { cell = row.insertCell(i); cell.innerHTML = data[key][i]; } } } loadSheet(); 

 <table id="SpreadsheetTable"></table>