Javascript 显示来自数组特定项的数据

我目前正在从一个对象中提取数据

function getData() {
  var data = [
    {
      animalname: "Cheetah",
      id: 1,
      sci_name: "Acinonyx jubatus"
    },
    {
      animalname: "Lion",
      id: 2,
      sci_name: "African Lion"
    }
  ];

  showInfo(data);
}

getData();


function showInfo(data) {

  var chartdiv = document.querySelector(".test");
  // console.log("data: ", data);
  data.forEach( function(data) {

    // card
    var card = document.createElement('div');
    card.classList.add("card");

    //content
    var content = document.createElement('div');
    content.classList.add('content');
    content.innerHTML = data.animalname;

    // append
    chartdiv.appendChild(card);
    card.appendChild(content);
  });
}

我可以通过forEach在“卡片”中显示数据

我试图实现的是显示项目中的其他数据，例如data.sci_名称或data.id。但我想在另一个id为“Selected card”的创建的div中显示这一点。看我的，看我的。最好的情况是，我想在点击一张特定卡片时创建“所选卡片”的内容，并在新创建的div中显示该特定的附加数据

---

如何显示来自特定卡的附加数据？Thnx提前查看。

很难理解这个问题，但要在数组中检索对象（其中）可以使用数组#find，这允许您在没有索引的数组中查找。 用法：

---

由于javascript的性质，您可以简单地将数据（forEach参数）附加到card对象

card（这是黑客的方式）。或者，您可以将数据项的索引添加到自定义属性，并在事件发生时从该索引中重新选择数据。
var array = [{name: "Shanon", age: 24}, {name: "John", age: 40}, {name: "Man", age: 50}]
array.find(function(element) {
    return element.name === "Shanon"
})