(Javascript) Adding data to table from local storage

December 4, 2021

Good day,
This is some sort of a journal I’m trying to make, the localStorage setItem part is fine, it’s the getItem I’m having trouble with, after adding the entries to the table, when I refresh, all of the entries are gone and I’m only left with 1 row with the default input values, ("state?" and "").

JS code:

const state = document.querySelector("#state");
const why = document.querySelector(".why");
const button = document.querySelector(".button");
const table = document.querySelector(".table");

// Date
var currentDate = new Date();
let cDay = currentDate.getDate();
let cMonth = currentDate.getMonth() + 1;
let cYear = currentDate.getFullYear();
let cDate = cMonth + "-" + cDay;

var sArray = [];

// Check if there's data in local storage

if (localStorage.getItem("states")) {
  sArray = JSON.parse(localStorage.getItem("states"));
}

getDataFromLocalStorage();

button.addEventListener("click", () => {
  if (state.value !== "state?") {
    addToArray();
    why.value = "";
    state.value = "state?";
  }
});

function addToArray() {
  addToTable();
  addDataToLocalStorage();
}
function addDataToLocalStorage() {
  window.localStorage.setItem("states", JSON.stringify(sArray));
}

function addToTable() {
  // Object
  let dataObject = {
    state: state.value,
    reason: why.value,
  };
  // Add to array
  sArray.push(dataObject);

  const tr = document.createElement("tr");
  const tdstate = document.createElement("td");
  const tdWhy = document.createElement("td");
  const tdDate = document.createElement("td");
  tr.appendChild(tdstate);
  tr.appendChild(tdWhy);
  tr.appendChild(tdDate);
  table.appendChild(tr);
  tdstate.innerText = dataObject.state;
  tdWhy.innerText = dataObject.reason;
  tdDate.innerText = cDate;
}

function getDataFromLocalStorage() {
  let data = window.localStorage.getItem("states");
  if (data) {
    let states = JSON.parse(data);
    addToTable(states);
  }
}

And this is the HTML code

<body>
    <h1>How are you feeling today?</h1>
    <div class="content">
      <div class="form">
        <select name="state" id="state">
          <option>State?</option>
          <option value="very happy">Very happy</option>
          <option value="happy">Happy</option>
          <option value="okay">Okay</option>
          <option value="sad">Sad</option>
          <option value="terrible">Terrible</option>
        </select>
        <input class="why" type="text" placeholder="Why?" />
        <input class="button" type="button" value="Add" />
      </div>
      <table class="table">
        <th>State</th>
        <th>Reason</th>
        <th>Date</th>
      </table>
    </div>

    <script src="script.js"></script>
  </body>

>Solution :

you call addToTable(states); but this function doesn’t accept any parameters function addToTable() {.

and it seams like a problem in your logic.

you write it to sArray but never use this values.

here a blind try, not tested it:

const state = document.querySelector("#state");
const why = document.querySelector(".why");
const button = document.querySelector(".button");
const table = document.querySelector(".table");

// Date
var currentDate = new Date();
let cDay = currentDate.getDate();
let cMonth = currentDate.getMonth() + 1;
let cYear = currentDate.getFullYear();
let cDate = cMonth + "-" + cDay;

var sArray = [];

getDataFromLocalStorage();

button.addEventListener("click", () => {
  if (state.value !== "state?") {
    addToArray({
      state: state.value,
      reason: why.value,
    });
    why.value = "";
    state.value = "state?";
  }
});

function addToArray(dataObject) {
  sArray.push(dataObject);
  addToTable(dataObject);
  addDataToLocalStorage();
}
function addDataToLocalStorage() {
  window.localStorage.setItem("states", JSON.stringify(sArray));
}

function addToTable(dataObject) {
  const tr = document.createElement("tr");
  const tdstate = document.createElement("td");
  const tdWhy = document.createElement("td");
  const tdDate = document.createElement("td");
  tr.appendChild(tdstate);
  tr.appendChild(tdWhy);
  tr.appendChild(tdDate);
  table.appendChild(tr);
  tdstate.innerText = dataObject.state;
  tdWhy.innerText = dataObject.reason;
  tdDate.innerText = cDate;
}

function getDataFromLocalStorage() {
  let data = window.localStorage.getItem("states");
  if (data) {
    sArray = JSON.parse(data);
    for(const row of sArray) {
      addToTable(row);
    } 
  }
}