Tengo este fragmento de código que convierte una matriz de cadenas en una matriz de objetos y luego los muestra junto con sus detalles en una cuadrícula de tarjetas de productos:
let allHoodies = [ ['Hoodie', 'Purple', 'Cotton', '$39.99', 'image/items/hoodies/hoodie(1).jpg'], ['Hoodie', 'Blue', 'Cotton', '$39.99', 'image/items/hoodies/hoodie(2).jpg'], ['Hoodie', 'Green', 'Cotton', '$39.99', 'image/items/hoodies/hoodie(3).jpg'] ] allHoodies.forEach((element, index) => { let obj = {} obj.type = element[0] obj.color = element[1] obj.material = element[2] obj.price = element[3] obj.imagesrc = element[4] allHoodies[index] = obj }) //Evaluating each hoodie and displaying its information in HTML allHoodies.forEach(function (hoodie) { let card = ` <div class="card"> <img class="product-image" src="${hoodie.imagesrc}"> <h1 class="product-type">${hoodie.type}</h1> <p>Color: ${hoodie.color}</p> <p>${hoodie.material} <a href="#" id="addToSessionStorage" onclick="">Read more</a> </p> <p class="price">${hoodie.price}</p> <p><button>Buy</button></p> </div> `; // Add the card to the page document.getElementById('product-container').innerHTML += card; });¿Cómo puedo agregar el objeto específico al almacenamiento de la sesión al hacer clic en " Leer más "?
poner juntos en: JSFiddle
let allHoodies = [ ['Hoodie', 'Purple', 'Cotton', '$39.99', 'image/items/hoodies/hoodie(1).jpg'], ['Hoodie', 'Blue', 'Cotton', '$39.99', 'image/items/hoodies/hoodie(2).jpg'], ['Hoodie', 'Green', 'Cotton', '$39.99', 'image/items/hoodies/hoodie(3).jpg'] ] allHoodies.forEach((element, index) => { let obj = {} obj.type = element[0] obj.color = element[1] obj.material = element[2] obj.price = element[3] obj.imagesrc = element[4] allHoodies[index] = obj; }) allHoodies.forEach(function (hoodie) { let card = ` <div class="card"> <img class="product-image" src="${hoodie.imagesrc}"> <h1 class="product-type">${hoodie.type}</h1> <p>Color: ${hoodie.color}</p> <p>${hoodie.material} <a href="#" class="addToSessionStorage" onclick="">Read more</a></p> <p class="price">${hoodie.price}</p> <p><button>Buy</button></p> </div> `; // Add the card to the page document.getElementById('product-container').innerHTML += card; }); [...document.querySelectorAll(".addToSessionStorage")].forEach((readMoreBtn, index) => { readMoreBtn.addEventListener('click', (e) => { sessionStorage.setItem(index, JSON.stringify(allHoodies[index])); }) });Agregaría una id a cada objeto con hoodie . Podrías usar el index para esto. Luego, deberá completar el controlador onclick con algo como addToStorage(${hoodie.id}) . En la función addToStorage puede hacer la adición real del elemento al almacenamiento.
Actualizó su violín y lo publicó a continuación:
let allHoodies = [ ['Hoodie', 'Purple', 'Cotton', '$39.99', 'image/items/hoodies/hoodie(1).jpg'], ['Hoodie', 'Blue', 'Cotton', '$39.99', 'image/items/hoodies/hoodie(2).jpg'], ['Hoodie', 'Green', 'Cotton', '$39.99', 'image/items/hoodies/hoodie(3).jpg'] ] allHoodies.forEach((element, index) => { let obj = {} obj.id = index obj.type = element[0] obj.color = element[1] obj.material = element[2] obj.price = element[3] obj.imagesrc = element[4] allHoodies[index] = obj }) //Evaluating each hoodie and displaying its information in HTML allHoodies.forEach(function(hoodie) { let card = ` <div class="card"> <img class="product-image" src="${hoodie.imagesrc}"> <h1 class="product-type">${hoodie.type}</h1> <p>Color: ${hoodie.color}</p> <p>${hoodie.material} <a href="#" onclick="addToStorage(${hoodie.id})">Read more</a> </p> <p class="price">${hoodie.price}</p> <p><button>Buy</button></p> </div> `; // Add the card to the page document.getElementById('product-container').innerHTML += card; }); function addToStorage(id) { const hoodie = allHoodies[id] console.log(hoodie) // sessionStorage can only store strings // commented out because sessionStorage cannot be set in the SO environment // sessionStorage.setItem("someKey", JSON.stringify(hoodie)) } * { box-sizing: border-box; font-family: sans-serif; } .card { box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); max-width: 300px; margin: 10px; text-align: center; } .product-type { color: #f2be1a; } .price { color: #000000; font-size: 22px; } .card button { outline: 0; color: #000000; text-align: center; font-size: 18px; } #product-container { display: flex; flex-wrap: wrap; justify-content: space-between; margin: 30px; } .product-image { width: 100%; } <div id="product-container"></div>