0
439
Vistas¿Cómo convierto el elemento div creado en un objeto para poder convertirlo a JSON?
Así que he estado tratando de hacer que mi lista se guarde en el almacenamiento local cuando se inserta en una matriz vacía. Sin embargo, JSON no puede convertir un elemento HTML, he intentado tomar un elemento HTML y convertirlo en un objeto, pero aún no tuve suerte.
El resultado final debería poder convertir el elemento HTML para que pueda leerse a través de un JSON.stringify() .
JS
const tasks = document.createElement("div"); tasks.innerHTML = ` <div class="task-content"> <div class="task" data-id="${id}"> <div class="new-task-created">${taskNew}</div> <label class="due-date">${taskDate}</label> <label class="due-time">${taskTime}</label> </div> <div class="atcion-buttons"> <button onclick="editItem()" class="edit" data-id="${id}">Edit</button> <button onclick="deleteItem()" class="delete" data-id="${id}">Delete</button> <button onclick="completeItem()" class="complete" data-id="${id}">Complete</button> </div> </div>`; const taskData = { id: document.querySelector(".task"), task: document.querySelector(".new-task-created"), dueDate: document.querySelector(".due-date"), dueTime: document.querySelector(".due-time"), }; taskList.push(tasks); console.log(taskList); storeList(); el.list.appendChild(tasks); }; //function that stores task list. function storeList() { localStorage.setItem("tasks", taskList); }En la imagen, el elemento HTML está causando problemas al guardar en localStorage.
La conversión ayudará a guardar la lista en el almacenamiento local.
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
Creo que solucioné el problema.
Lo que hice fue poner createId() taskNew taskDate taskTime en un objeto y obtuve los resultados que quería.
const creatTask = (task) => { const data = { id: createId(), taskNew: el.input.value, taskDate:el.date.value, taskTime: el.time.value, } if (!data.taskNew) { alert("Please add a new Task"); } if (!data.taskDate) { alert("Please add a new Task with a due date"); } if (!data.taskTime) { alert("Please add a new Task with a due time"); } const tasks = document.createElement("div"); tasks.innerHTML = ` <div class="task-content"> <div class="task" data-id="${data.id}"> <div class="new-task-created">${data.taskNew}</div> <label class="due-date">${data.taskDate}</label> <label class="due-time">${data.taskTime}</label> </div> <div class="atcion-buttons"> <button onclick="editItem()" class="edit" data-id="${data.id}">Edit</button> <button onclick="deleteItem()" class="delete" data-id="${data.id}">Delete</button> <button onclick="completeItem()" class="complete" data-id="${data.id}">Complete</button> </div> </div>`; taskList.push(data); console.log(taskList); storeList(); el.list.appendChild(tasks); }; //function that stores task list. function storeList() { let json = JSON.stringify(taskList); localStorage.setItem("storage_key", json); console.log(json); } 
·
Juan Pablo Isaza
Denunciar
Responde la pregunta