CODEWITHSUNDEEP
javascriptarraysjsonobjectlocal-storage
Kaitlin Danson
Kaitlin Danson

Reputation: 113

maximum call stack size exceeded error... how do I fix?

I'm trying to code a to do list, that take the values from the input form, stores it into an object, pushes the object into an array, stringifies the array, stores it in local storage, retrieves from local storage, and posts it in a table.

i'm getting the error "maximum call stack size exceeded" in reference to the line where I create the object... i'm not entirely sure if I'm doing the part of saving the values from the input fields into the object correctly...help? thank you

var table = document.getElementById("tableBody");

toDoArray = [];


function buildTable(){
addToStorage();
var retrievedTaskObject = localStorage.getItem("task");
var parsedObject = JSON.parse(retrievedTaskObject);
var addTheTaskName = parsedObject.taskName;
var addTheTaskDate = parsedObject.taskDate;
  var tableHTML = "";
  for(i=0; i < toDoArray.length; i++){
    var row = table.insertRow(0);
    var cellName = row.insertCell(0);
    var cellDate = row.insertCell(1);
    var cellId = row.insertCell(2);
    var cellCheck = row.insertCell(3);
    cellName.innerHTML= parsedObject[i].name;
    cellDate.innerHTML= parsedObject[i].date;
    cellId.innerHTML = 1 + i;
    var checkStuff = "<input type='checkbox'>";
    tableHTML += checkStuff;

  }
  document.getElementById("tableBody").innerHTML = tableHTML;
}

function submitForm(name,date) {
  var taskObject = {
    name: name,
    date: date,
  };

var addTaskName = document.getElementById("taskName").value;
var addTaskDate = document.getElementById("dateTask").value;
var taskSomething = submitForm(addTaskName,addTaskDate);
  toDoArray.push(taskObject);
  buildTable();
};

function addToStorage(){
  var storedArray = JSON.stringify(toDoArray);
  localStorage.setItem("task",storedArray);}

Upvotes: 0

Views: 2355

Answers (1)

RahulB
RahulB

Reputation: 2110

You are doing a recursion by calling submitForm method in iself. Since there is no break condition to stop recursion, maximum stack error occurs

function submitForm(name,date) {
  var taskObject = {
    name: name,
    date: date,
  };

var addTaskName = document.getElementById("taskName").value;
var addTaskDate = document.getElementById("dateTask").value;
var taskSomething = submitForm(addTaskName,addTaskDate);
  toDoArray.push(taskObject);
  buildTable();
};

It should be something like this--

function submitForm(name,date) {
    var addTaskName = document.getElementById("taskName").value;
    var addTaskDate = document.getElementById("dateTask").value;
    var taskSomething = getTaskObj(addTaskName,addTaskDate);
      toDoArray.push(taskSomething);
      buildTable();
};

function getTaskObj(taskName,taskData){
var taskObject = {
        name: taskName,
        date: taskData,
      };
 return taskObject;
}

Upvotes: 1

Related Questions