javascript - 如何获取数组中的唯一值并将它们附加到使用jQuery的选择中

Question

我有一个对象数组[{COUNTRY_NAME: "xxx", COUNTRY_CODE: "xxx"},...]

我想获取的唯一值COUNTRY_NAME并将这些值附加到 aselect中，对于COUNTRY_CODE

我所做的是：

首先我遍历我所有的选择$("select").each然后我得到当前选择的 idvar id = $(this).attr("id");

然后我创建一个具有该键的唯一值的数组let unique = [...new Set(data.map(item => item.COUNTRY_NAME))];问题就在这里，当我使用item => item.id它时，它无法将 id 识别为 key in data。

最后，我在每个选择中添加唯一值作为选项。

我怎么能在 jQuery 中说它id是一个变量键，所以它item.id会根据当前值而变化，并且它不是id我的data数组中调用的键？

请问有什么建议吗？非常感谢。

$(document).ready(function() { 

var data = [{COUNTRY_NAME: "Austria", COUNTRY_CODE: "AT"},
{COUNTRY_NAME: "Austria", COUNTRY_CODE: "AT"},
{COUNTRY_NAME: "Belgium", COUNTRY_CODE: "BE"},
{COUNTRY_NAME: "Croatia", COUNTRY_CODE: "HR"},
{COUNTRY_NAME: "Croatia", COUNTRY_CODE: "HR"},
{COUNTRY_NAME: "France", COUNTRY_CODE: "FR"},
{COUNTRY_NAME: "Austria", COUNTRY_CODE: "AT"},
{COUNTRY_NAME: "Austria", COUNTRY_CODE: "AT"},
{COUNTRY_NAME: "France", COUNTRY_CODE: "FR"}];

 $("select").each(function() {
 var id = $(this).attr("id");
 console.log(id);
 
 //when I use item.COUNTRY_NAME or item.COUNTRY_CODE it works
 //but when I use item.id where id will get the current value I want to map it shows undefined.
//The problem is : it can't find a key id in data
 
 //let unique = [...new Set(data.map(item => item.id))];
 
 let unique = [...new Set(data.map(item => item.COUNTRY_NAME))];
 console.log(unique);
 
var $mySelect = $(this);
$.each(unique, function(key, value) {
  var $option = $("<option/>", {
    value: key,
    text: value
  });
  $mySelect.append($option);
});
 
 
 
 });
 
} );

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


<h5>COUNTRY NAME</h5>
<select id = "COUNTRY_NAME" multiple></select>
<h5>COUNTRY CODE</h5>
<select id = "COUNTRY_CODE" multiple></select>

标签： javascriptjquery