CODEWITHSUNDEEP
javascripthtmlarrays
grcHIDDEN
grcHIDDEN

Reputation: 81

How can I populate my HTML table with an array of data?

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

Upvotes: 0

Views: 613

Answers (2)

codejockie
codejockie

Reputation: 10902

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>

Upvotes: 0

user3589620
user3589620

Reputation:

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>

Upvotes: 2

Related Questions