Mi problema que tengo es cuando recorro mi almacenamiento local, solo el último elemento se coloca en el DOM cuando quiero colocar todos los elementos para hacer el DOM
function checkStorage() { let cartContents = document.getElementsByClassName("products")[0]; let cartProduct = document.createElement("div"); cartProduct.classList.add("product"); let cartCheck = JSON.parse(localStorage.getItem("localItem")); // return cartCheck; savedCart = ""; if (cartCheck === null) { return; } else { console.log(cartCheck); for (const check in cartCheck) { if (Object.hasOwnProperty.call(cartCheck, check)) { const element = cartCheck[check]; savedCart = `<img width="60" src="${element.img}" alt="iphone" /> <div> <span class='title'> ${element.title}</span> <div class='price-section'> <input type="number" value="1" class="cart-quantity-input" /> <span class='cart-price'>${element.price}</span> </div> </div> <button class='btn-danger'> <i class="bi bi-x"></i> </button>`; cartProduct.innerHTML = savedCart; console.log(cartProduct); cartContents.append(cartProduct); } } } }Está actualizando todo el cartProduct innerHTML cada iteración dentro de su bucle for. Es por eso que solo el último elemento se coloca en el DOM.
Cree una cadena vacía fuera del bucle for y agregue HTML a esa cadena para cada iteración. Luego actualice el innerHTML después de su bucle for.
function checkStorage() { let cartContents = document.getElementsByClassName("products")[0]; let cartProduct = document.createElement("div"); cartProduct.classList.add("product"); let cartCheck = JSON.parse(localStorage.getItem("localItem")); // return cartCheck; savedCart = ""; if (cartCheck === null) { return; } else { console.log(cartCheck); let savedCartsHtml = ''; for (const check in cartCheck) { if (Object.hasOwnProperty.call(cartCheck, check)) { const element = cartCheck[check]; savedCart = `<img width="60" src="${element.img}" alt="iphone" /> <div> <span class='title'> ${element.title}</span> <div class='price-section'> <input type="number" value="1" class="cart-quantity-input" /> <span class='cart-price'>${element.price}</span> </div> </div> <button class='btn-danger'> <i class="bi bi-x"></i> </button>`; savedCartsHtml += savedCart; console.log(cartProduct); cartContents.append(cartProduct); } } cartProduct.innerHTML = savedCartsHtml; } }