从API调用（Javascript）返回的对象数组中按Id选择对象时出现问题

我目前正在建立一个电子商务网站，使用HTMl、CSS、Javascript和Contentful作为无服务器后端和数据库。我为我的产品调用Api，然后操纵Contentful提供的产品标题、描述、图像、id和价格。我已经创建了正确的类，处理了数据并显示了产品。这就是我在过去6周里一直被困的地方。我想要一个功能，当我点击产品旁边的眼睛图标时，它会显示该产品的全屏模式，包括描述、图像、价格和添加到购物车按钮。我们都在电子商务网站上看到过； 逻辑是这样的：

• 将产品的所有ID作为数据ID从api传递到eye图标（已经这样做了）

• 在我的JS文件中将所有眼睛图标组合成一个节点列表（已经这样做了）

• 使用ForEach语句循环遍历nodelist（已经这样做了）

• 将事件侦听器添加到forEach参数名称并将其绑定到click事件（已执行此操作）

• 创建一个变量“btnId”，并将单击的特定眼睛图标的ID分配给该变量（已经这样做了）

• 在通过API接收的产品数组中查找与单击的按钮具有相同ID的产品，并将其分配给新变量“productItem”（这就是我的问题所在）

• 调用一个显示描述模式的函数，并将上面的变量“productItem”作为参数传入。 我尝试了所有方法，但无法访问ID等于“btnId”的产品
  编译说明（产品）{
  }

此处未定义product.id，因为product是对象数组的名称。 如何从对象数组中访问特定产品，而不知道要提前访问哪个数组索引？ 请帮忙！！我已经做了6个多星期了。提前谢谢

以下是该网站的链接：

---

这里是指向我的完整代码的链接：

向我们展示一些产品架构的示例。这应该是

products.find…

而不是

let-productItem=product.find（product=>product.id==btnId）

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