He estado tratando de resolver esto por un tiempo, pero no puedo resolverlo. Recibí algunos productos de una API y después de deconstruirlos, los pasé a algunas etiquetas HTML para realizar la manipulación DOM en ellos desde JS así...

 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; }

Luego comencé a manipular, pero me encontré con un problema al usar el método de matriz .find para hacer coincidir una identificación con la identificación de la matriz de objetos a pesar de que son exactamente iguales.

 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 }) }) }

Lo que quiero es que cuando se haga clic en un botón con una identificación particular, la identificación coincida con una identificación de un objeto en la matriz de objetos y el objeto se me devuelva para su manipulación. Por favor, ayúdenme chicos. Gracias de antemano.