Menu
Community /Pin to ProfileBookmark
@daveyerwinJun 10.2021 — #@omotovh#1632756
what is the error you encounter ?
you say "product is the name of an array of objects"
where does product come from ?
how do you call the function compileDescription(products) ?
compileDescription('what do you pass to function here')
the parameter 'products' is not referenced in the code
A JAVASCRIPT ARRAY PROBLEM FROM AN API CALL
I’m currently building an ecommerce website using HTMl, CSS, Javascript and Contentful as a serverless backend and database. I make Api calls for my products and then manipulate the product title, description, image, id and price that Contentful delivers. I already created the right classes, manipulated the data and displayed the products. Here is where I have been stuck for the past 6 weeks. I want a functionality where when I click an eye icon next to a product, it displays a fullscreen modal of that product that includes a description, an image, price and add to cart button. We’ve all seen it on Ecommerce sites;
The logic goes thus:
– Pass all the IDs of the products from the api to the eye icons as data-ids ( already did this)– Assemble all eye icons into a Node List in my JS file (already did this)– Use a ForEach statement to loop through the nodelist (already did this)– Add an Event Listener to the forEach argument name and bind it to a click event (already did this)– Create a variable “btnId”, and assign the ID of the specific eye icon that was clicked to this variable (already did this)– Find the product in the array of products received via the API that has the same ID as the button that was clicked and assign it to a new variable “productItem”(THIS IS WHERE MY PROBLEM IS);– Call a function that displays the description modal and pass in the variable “productItem” above as argument.
I have tried everything but I can’t access the product that has the ID that is equals to “btnId”.
compileDescription(products){
const eyeView = […document.querySelectorAll(‘.view’)];
eyeView.forEach(viewBtn => {
viewBtn.addEventListener(‘click’, (event)=>{
const btnId= event.target.dataset.class;
console.log(btnId);
let productItem = product.find(product => product.id === btnId)
if (productItem) {
this.displayDescription(productItem);
};
})
})
}
product.id here is undefined because product is the name of an array of objects.
How do i access a specific product from an array of object without knowing which array index i will be accessing ahead of time?
Please help!! I’ve been on this for over 6 weeks now. Thanks in advance
Here is a link to the website:
Here is a link to my full code:
Sign in
to post a comment2 Comments(s) ↴
0
@daveyerwinJun 10.2021 — #what is the error you encounter ?
you say "product is the name of an array of objects"
where does product come from ?
how do you call the function compileDescription(products) ?
compileDescription('what do you pass to function here')
the parameter 'products' is not referenced in the code