Value is defined but still showing "cannot read the properties of null" (foreach)

Question

I was working on a Js project that takes notes through a textarea using a button with a click event. I have stored the value from the text area in localstorage in "notes" key. So all i did was that i parsed it pushed the value from txtarea and then stringified it and further parsed it for an html change but now when i apply a forach loop on the PARSED form of notes it shows error - cannot read the porps of null reading foreach.

console.log("Welcome To MagicNotes");

// if users adds a note add it to the local storage
let addbtn = document.getElementById("addbtn");
// let notes = document.getElementById('notes')

// add a eventlistener -- click
addbtn.addEventListener("click", function (e) {

  //firstly we get/define the values
  let addtxt = document.getElementById("addtxt"); //get the textarea by its id
  let notes = localStorage.getItem("notes"); //get a notes array in the local storage

  // here comes the operation part -->

  // do nothing if value is null
  if (notes == null) {
    notesObj = [];

    // but parse if finds a string
  } else {
    notesObj = JSON.parse(notes); //use notesObj to store obj values of "notes"
     //JSON.parse is used to convert a text to object
  }
  // now update the value in that obj
  notesObj.push(addtxt.value);

  localStorage.setItem("notes", JSON.stringify(notesObj)); //now stringify notesObj and use it in local storage
  addtxt.value = ""; //to clear the txtarea after adding a note
  console.log(notesObj);
  showNotes();
  
});

function showNotes() {
  let notes = localStorage.getItem("notes");
  if (notes = null) {
    notesObj = [];
  } else {
    notesObj = JSON.parse(notes);
  }
  let html = "";

  notesObj.forEach (function (element, index) {
    html += `
   <div id="notes" class="noteCard my-2 mx-2 card">
   <div class="container my-1">
    <div class="card" style="width: 100%;">
        <div class="card-body">
          <h5 class="card-title">Note ${index + 1}</h5>
          <p class="card-text">${element}</p>
          <button href="#" class="btn btn-warning">Delete</button>
        </div>
      </div>
   </div>
   `;
  });
  let notesElm = document.getElementById("notes");
  if (notes.length == 0) {
    notesElm.innerHTML = html;
  }
}

It's impossible for the only call to `forEach` in the code above to result in the error you've described unless `notesObj` in `showNotes` is read-only for some reason. There's no declaration for `notesObj` in the question, so it's hard to know what it is. But there's a clear error in the code here: `if (notes = null) {`. That **assigns** `null` to `notes` and then tests to see if the resulting value (`null`) is truthy. It isn't, so the `else` branch is taken. That's not going to cause the error you described, but it's still incorrect. Maybe you've made the same error elsewhere with `notesObj`. — T.J. Crowder, May 19 '22 at 06:47
notesObj = JSON.parse(notes); its is the object ive used to store content of "notes" . — Aman Choudhary, May 19 '22 at 07:36
I said "declaration," not assignment. There's no *declaration* for `notesObj` in the code, so we have no idea how or where it's declared and whether it's read-only. — T.J. Crowder, May 19 '22 at 07:41

Value is defined but still showing "cannot read the properties of null" (foreach)

0 Answers0