compileDescription(products){
console.log(products) // this works fine and displays 16 products which are 16 objects in arrays.
const eyeView = [...document.querySelectorAll('.view')];
eyeView.forEach(viewBtn=>{
viewBtn.addEventListener('click', (event)=>{
const btnId = event.target.dataset.class
console.log(btnId); //this works and shows the ID of the clicked button
const productFind = products.find(product=> product.id === btnId)
console.log(productFind); //returns undefined even though the products array of objects has an object with a matching id to the id of the clicked button
})
})
}
Make sure that their types match. It looks like btnId is a string, is the id property of the product objects a string as well?
Yes. They are strings. I actually passed the Id to BtnId from the products objects. I received the products from an API.
You can see it in the code below.
displayProducts(products){
let result = '';
products.forEach(product => {
result += `
<article class="product">
<div class="img-container">
<img src=${product.image} alt="product" class="product-img">
<button class="bag-btn" data-id= ${product.id}>
<img src="./images/icons8_add_shopping_cart_100px.png"
width="16px" max-width= "18px" alt="add to cart"/>
Add to cart
</button>
</div>
<div class="goodsinfo">
<span class="description"> <img src="./images/icons8_eye_100px.png" class="view" data-class=${product.id}/>
</span>
<span class="titleprice">
<h3>${product.title}</h3>
<h4>#${product.price}</h4>
</span>
</div>
</article>
`
});
productsDOM.innerHTML = result;
}
I’ve also done proper testing in the console and the types can’t possibly be different. I have a feeling it’s because I am trying to perform the .find manipulation inside an event listener that is nested in a forEach loop but I can’t place my mind around what exactly is wrong
Please post the products array so we can see it.
Are you sure the product id isn’t a number? Because that wouldn’t be uncommon for an API. For example, fakestoreapi uses a number. What API are you using?
I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.
You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.
See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').
Thank you so much lasjorg. Someone just solved it for me on StackOverflow. I was missing quotation marks around the data-id. That was what I was missing.
I used contentful API. The id is a combination of letters, numbers and symbols all parsed as a string.
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.