Actualmente estoy creando una aplicación CRUD para que los usuarios puedan realizar un seguimiento de los libros que han leído o no. Actualmente estoy tratando de implementar una función de actualización/edición para que el usuario pueda actualizar la información del libro si lo desea. El problema que tengo es que cada vez que trato de guardar la información del libro después de cambiar los valores de entrada, el último libro en la matriz 'myLibrary' obtendría la información en lugar del libro actual que estoy tratando de actualizar. La única vez que el libro actual recibe la entrada del usuario es cuando es el único libro en la matriz :(
Intenté usar el método de empalme de matriz () para reemplazar el libro actual con un nuevo libro que tiene la nueva información/valores, pero sigo teniendo el mismo problema.
// book class: represents a book class Book { constructor(title, author, pages, read) { this.title = title; this.author = author; this.pages = pages; this.read = read; } } // array to store books.. default books using the Book Constructor let myLibrary = [{ title: 'Dark Matter', author: 'Blake Crouch', read: 'read', pages: 342, }, { title: '1984', author: 'Geroge Orwell', read: 'not read', pages: 328 }, ]; /* saves the updated user input on click and closes modal removes the book from the library array and adds the updated book to the library array and saves it to local storage again with updated info from user input in the form fields in the modal window and closes the modal window after submission of the form fields */ saveBtn.addEventListener('click', (index) => { myLibrary.splice(myLibrary.indexOf(index), 1); addBookToLibrary(); setData(); render(); document.querySelector('.modal').classList.add('modal--hidden'); hideBackgroundFade(); clearForm(); });Difícil de decir sin más código, especialmente. la estructura HTML o un marco que podría usar. Entonces, asumiendo la siguiente estructura HTML:
<div class='books'> <div book-id="123"> <h1>Title 1</h1> <p>200 pages</p> </div> <div book-id="456"> <h1>Title 2</h1> <p>100 pages</p> </div> </div>Para ser más genérico, es decir, cualquier clic vincularía su interfaz de usuario a la fuente de datos, su secuencia de comandos podría verse así:
const books = document.querySelector('.books'); books.addEventListener("click", evt => { const book = evt.target.closest("[book-id]"); if (book) { const bookId = book.getAttribute("book-id"); const bookInLib = myLibrary.find( elem => elem.id == bookId ) // here you update your book and trigger rendering } })