如何在下拉列表中获取不同的值

Question

我实现了一个下拉列表，其中列表来自 JSON 文件，但 JSON 具有重复值。如何获得该下拉列表中的唯一值？这是我的代码：

$(document).ready(function() {
    $.getJSON("data.json",function(obj) {
        $.each(obj, function(key, value){
            $("#dropdown1").append("<option value=" + key + ">" + value.name  + "</option>");
        });
    });
});

我的 JSON 文件如下所示：

[{
    "name": "abc1",
    "date": 1459461600000
}, {
    "name": "abc1",
    "date": 1459461600000
}, {
    "name": "abc1",
    "date": 1459461600000
}, {
    "name": "syn2",
    "date": 1459461600000
}, {
    "name": "syn2",
    "date": 1458834026000
}];

在第一个下拉列表中，现在我得到 5 个值，

abc1

3 次和

syn2

2 次。我只想同时获得

abc1

和

syn2

一次。请帮忙！

Answer 1

您可以通过将已添加到选择的名称存储在数组中来实现此目的，并在添加下一个名称之前检查该数组。像这样的东西：

var obj = [{ "name": "abc1", "date": 1459461600000}, { "name": "abc1", "date": 1459461600000}, { "name": "abc1", "date": 1459461600000}, { "name": "syn2", "date": 145946160000}, { "name": "syn2", "date": 1458834026000}];

var usedNames = [];
$.each(obj, function(key, value) {
  if (usedNames.indexOf(value.name) == -1) {
    $("#dropdown1").append("<option value=" + key + ">" + value.name + "</option>");
    usedNames.push(value.name);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<select id="dropdown1"></select>

您可以对对象数组进行重复数据删除，但是当您唯一的要求是在一个循环中获取单个属性时，这似乎有点过分了。

Answer 2

您必须检查 obj 值是否重复，然后附加到选择选项，如下所示：

 $(document).ready(function() {
   $.getJSON("data.json",function(obj) {
   var duplicate= [];
   $.each(obj, function(key, value) {
     if (duplicate.indexOf(value.name) == -1) {
      $("#dropdown1").append("<option value=" + key + ">" + value.name + "</option>");
      duplicate.push(value.name);
      }
    });
  });
});