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


        console.log(products) // this works fine and displays 16 products which are 16 objects in arrays.

        const eyeView = [...document.querySelectorAll('.view')];



        viewBtn.addEventListener('click', (event)=>{

        const btnId =

        console.log(btnId); //this works and shows the ID of the clicked button

        const productFind = products.find(product=> === 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.


        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= ${}>

                         <img src="./images/icons8_add_shopping_cart_100px.png"

                         width="16px" max-width= "18px" alt="add to cart"/>

                         Add to cart



                <div class="goodsinfo">

                    <span class="description"> <img src="./images/icons8_eye_100px.png" class="view" data-class=${}/>


                    <span class="titleprice">








        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.