I have this piece of code that converts an array of strings into an array of objects and then display them along with their details in a grid of product cards:
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;
});
how can I add the specific object to session storage upon clicking "Read more"?
put together in: 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]));
})
});
I would add an id to each hoodie object. You could use the index for this. Then you'll need to fill in the onclick handler with something like addToStorage(${hoodie.id}). In the addToStorage function you can do the actual addition of the item to storage.
Updated your fiddle and posted it below:
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>