javascript - 从具有特定属性的数组中获取项目并将它们显示在一个 div 上

Question

例如:

{
  "data": [
    {
      "name": "grape",
      "color": "purple"
    },
    {
      "name": "apple",
      "color": "green"
    },
    {
      "name": "strawberry",
      "color": "red"
    }
  ]
}

我用这个遍历数组:

for (var i=0; i < data.length; i++) {
  var item = "<button>"+data[i].name+"</button>";
  $('#items').append(item)
}

假设我想要它，所以当您单击按钮时，显示 color 值的 div，但使用相同的 div 为数组中的每个项目。我该怎么做？

Answer 1

向按钮添加事件处理程序。它在 data 数组中搜索与按钮文本同名的对象，并显示颜色。

var data = [{
    "name": "grape",
    "color": "purple"
  },
  {
    "name": "apple",
    "color": "green"
  },
  {
    "name": "strawberry",
    "color": "red"
  }
];

for (var i = 0; i < data.length; i++) {
  var item = "<button data-color=" + data[i].color + ">" + data[i].name + "</button>";
  $('#items').append(item)
}

$("button").click(function() {
  var name = $(this).text();
  var obj = data.find(el => el.name == name);
  $("#outputdiv").text(obj.color);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="items"></div>
<div id="outputdiv"></div>