Problem using array.find to manipulate an object from an array of objects using Id

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.