Добавление строк в таблицу, цикл массива, выполнение сумасшедших вещей, чтение первой строки каждый раз

Question

Я чувствую, что это, вероятно, проблема с петлей где-то, но я немного новее в кодировании, и у меня возникают проблемы с выяснением где именно проблема. Каждый раз, когда я добавляю новую задачу в список, она снова печатает первую задачу. Поэтому, если я добавляю вторую задачу, она вставляет первую задачу и вторую задачу в таблицу, если я добавлю третью задачу, она вставляет первую задачу и третью задачу в таблицу .. ее странно.

Я смотрел в своих локальных файлах хранения и сохранял их правильно. как в, (задача одна, задача вторая, задача три) нет повторения там, и ее получение сохраняется так, как я этого хочу.

Вопрос в том, что я пытаюсь сделать это:

Я хочу, чтобы цикл через массив, и есть все, что хранится в локальном хранилище размещается на столе. (В настоящее время, когда я обновляю его, он полностью сбрасывается, он действует как хранилище сеансов, а не локальное хранилище. Он появляется в локальном хранилище после обновления, но как только я нажимаю, чтобы добавить еще после обновления, он исчезает). его a сделать список, поэтому я хочу, чтобы он в основном показывал все элементы, перебирая массив, и когда я добавляю новый элемент, сохраните его и снова пропустите через массив и разместите его в таблице.

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; 


    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; 
    var checkStuff = "<input type='checkbox'>"; 
    cellCheck.innerHTML = checkStuff; 
    } 


} 

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; 
} 

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

Answer 1

Когда вы вызываете buildTable в форме отправки, он снова перебирает весь массив и добавляет элементы в таблицу. Попробуйте это,

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; 

for(i=0; i < toDoArray.length; i++){ 
    addTaskToTable(parsedObject[i]); 
} 



} 

function addTaskToTable(obj){ 
    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= obj.name; 
    cellDate.innerHTML= obj.date; 
    var checkStuff = "<input type='checkbox'>"; 
    cellCheck.innerHTML = checkStuff; 

} 

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

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

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

Answer 2

Вот фрагмент с моими комментариями.

var tasksStorageName = 'myTasks'; 
 
var tasksTable = document.getElementById("tasks_table"); 
 
var saveBtn = document.getElementById("save_task_btn"); 
 
var tasksList; 
 
var storage = getStorage(); 
 

 
// this is dirty workaround, because localStorage disabled 
 
// due to security reasons. feel free to remove this function 
 
// and use localStorage directly 
 
function getStorage() { 
 
    try { 
 
    return window.localStorage; 
 
    } 
 
    catch(e) { 
 
    return { 
 
     get: function(key) { 
 
     return JSON.stringify([ 
 
      { 
 
      id: Date.now(), 
 
      name: 'first task', 
 
      date: '10/10/2016', 
 
      done: false 
 
      } 
 
     ]); 
 
     }, 
 
     set: function(key, object) { 
 

 
     } 
 
    }; 
 
    } 
 
} 
 

 
function getTasksList() { 
 
    var dumpedTasks = storage.get(tasksStorageName); 
 
    
 
    // in case there are no tasks saved we return empty list 
 
    // otherwise parse our tasks. 
 
    return dumpedTasks == null ? [] : JSON.parse(dumpedTasks); 
 
} 
 

 
function dumpTaskList(tasksList) { 
 
    var dumpedTasks = JSON.stringify(tasksList); 
 
    
 
    storage.set(tasksStorageName, dumpedTasks); 
 
} 
 

 
// try to reuse things, so we have `renderTasks` function 
 
// to render all our tasks to table which uses `renderTask` 
 
// for each task. later we'll use it to add our newly created 
 
// tasks. 
 
function renderTasks(tasks) { 
 
    for (var index = 0; index < tasks.length; index++) { 
 
    var task = tasks[index]; 
 
    
 
    renderTask(task); 
 
    } 
 
} 
 

 
// helper function to create checkbox 
 
function createCheckboxForTask(task){ 
 
    var checkbox = document.createElement('input'); 
 
    checkbox.type = 'checkbox'; 
 
    checkbox.checked = task.done; 
 
    
 
    return checkbox; 
 
} 
 

 
function renderTask(task) { 
 
    var taskRow = tasksTable.insertRow(); 
 
    var doneCell = taskRow.insertCell(); 
 
    var nameCell = taskRow.insertCell(); 
 
    var dateCell = taskRow.insertCell(); 
 
    
 
    taskRow.id = task.id; 
 
    doneCell.appendChild(createCheckboxForTask(task)); 
 
    nameCell.innerText = task.name; 
 
    dateCell.innerText = task.date; 
 
} 
 

 
function createTask(name, date) { 
 
    return { 
 
    // quite naive id generation, don't use it in production 
 
    id: Date.now(), 
 
    name: name, 
 
    date: date, 
 
    done: false 
 
    } 
 
} 
 

 
// to restore your previously added tasks 
 
// you need to get them from localStorage 
 
// on load event and render them. 
 
window.addEventListener('load', function(e) { 
 
    tasksList = getTasksList(); 
 
    
 
    if (tasksList.length > 0) { 
 
    renderTasks(tasksList); 
 
    } 
 
}); 
 

 
saveBtn.addEventListener('click', function() { 
 
    var name = document.getElementById("task_name").value; 
 
    var date = document.getElementById("task_date").value; 
 
    var newTask = createTask(name, date); 
 
    
 
    tasksList.push(newTask); 
 
    renderTask(newTask); 
 
    dumpTaskList(tasksList); 
 
}); 
 
/* 
 
// function does too many things 
 
function buildTable(){ 
 
// if you try to call `buildTable` at page load then 
 
// `addToStorage` function will set localStorage task item 
 
// to empty array. thats why you lost your state every time 
 
// you reload page 
 
addToStorage(); 
 
var retrievedTaskObject = localStorage.getItem("task"); 
 
var parsedObject = JSON.parse(retrievedTaskObject); 
 
// why this two unnecessary variables? 
 
var addTheTaskName = parsedObject.taskName; 
 
var addTheTaskDate = parsedObject.taskDate; 
 

 
for(i=0; i < toDoArray.length; i++){ 
 
    addTaskToTable(parsedObject[i]); 
 
} 
 

 

 

 
} 
 

 
// try to give parametes as well as variables meaningful names 
 
// like `task` this time, not `obj` 
 
function addTaskToTable(obj){ 
 
    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= obj.name; 
 
    cellDate.innerHTML= obj.date; 
 
    var checkStuff = "<input type='checkbox'>"; 
 
    cellCheck.innerHTML = checkStuff; 
 

 
} 
 

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

 
// actually you are creating new task object, not getting it 
 
// from somewhere, so it's better to name it like createTask 
 
// or newTask 
 
function getTaskObj(taskName,taskData){ 
 
var taskObject = { 
 
     name: taskName, 
 
     date: taskData, 
 
     }; 
 
return taskObject; 
 
} 
 

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

<div> 
 
    <label>Name: </label> 
 
    <input id="task_name" type="text"/> 
 
</div> 
 
<div> 
 
    <label>Date: </label> 
 
    <input id="task_date" type="text"/> 
 
</div> 
 
<button id="save_task_btn" type="button">Save</button> 
 
<table id="tasks_table"> 
 
    <thead> 
 
    <tr> 
 
     <th>Done</th> 
 
     <th>Name</th> 
 
     <th>Date</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    </tbody> 
 
<table>