Question 249768 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Splice within for loop not removing selected indexes

If page reloaded, splice method returned [0]{‘C’} instead of 0:{‘B’}

todos = [0:{"title":"A"}, 1:{"title":"B"}, 2:{"title":"C"}] //store todos - localStorage
deletedTodo = [0,2] // remove A & C from todos - store removed element index - localStorage

window.addEventListener("load", (e) => {
  todos = JSON.parse(localStorage.getItem("todos")) || [];
  clearTodo();
});

function for checking deleted indexes that should removed from todos object then return updated todos object
otherwise return display Todos()

function clearTodo() {
  if (
    JSON.parse(localStorage.getItem("deletedTodo")) &&
    JSON.parse(localStorage.getItem("deletedTodo")).length > 0
  ) {
    for (
      let index = 0;
      index <= JSON.parse(localStorage.getItem("deletedTodo")).length;
      index++
    ) {
      todos.splice(JSON.parse(localStorage.getItem("deletedTodo"))[index], 1);
    }
    localStorage.setItem("todos", JSON.stringify(todos));

    localStorage.setItem("deletedTodo", JSON.stringify([]));
    deletedIndexex = [];

    return displayTodos();
  } else {
    return displayTodos();
  }
}
Tags:

3

Answers


  1. 0

    When you splice you should decrease your index by number of deleted items since the array got shorter. To behave your array normally load it from the local storage only once. And since you splice a different array, just filter it:

    function clearTodo() {
  const deletedTodos = JSON.parse(localStorage.getItem("deletedTodo"));
  if (deletedTodos?.length) {
    todos = todos.filter((_, i) => !deletedTodos.includes(i));
    localStorage.setItem("todos", JSON.stringify(todos));
    localStorage.setItem("deletedTodo", JSON.stringify([]));
    deletedIndexex = [];
  }
  return displayTodos();

}
    Login or Signup to reply.
  2. 0
    1. Read localStorage once and write in only one place each.
    2. Stay DRY (Don’t Repeat Yourself)

    For example

    const todoObject = JSON.parse(localStorage.getItem("todo") || '{"todos":[], "deletedTodos":[] }')
let deletedTodos = todoObject.deletedTodos;
let todos = todoObject.todos;
const writeLocal = () => localStorage.setItem("todos", JSON.stringify(todoObject));
function clearTodo() {
  if (deletedTodos.length === 0) return; // nothing to do here
  deletedTodos.forEach(index => todos.splice(index, 1));
  todoObject.todos = todos;
  todoObject.deletedTodos = [];
  writeLocal();
  displayTodos();
}
function addTodo(str) {
  todos.push({ "desc":str, "time": new Date().getTime() }); 
  writeLocal();
  displayTodos();
}
    Login or Signup to reply.
  3. 0

    Here’s the modified code:

    function clearTodo() {
  if (
    JSON.parse(localStorage.getItem("deletedTodo")) &&
    JSON.parse(localStorage.getItem("deletedTodo")).length > 0
  ) {
    const deletedIndexes = JSON.parse(localStorage.getItem("deletedTodo")).sort((a, b) => b - a);
    for (let i = 0; i < deletedIndexes.length; i++) {
      todos.splice(deletedIndexes[i], 1);
    }
    localStorage.setItem("todos", JSON.stringify(todos));
    localStorage.setItem("deletedTodo", JSON.stringify([]));
    return displayTodos();
  } else {
    return displayTodos();
  }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search