如何从Javascript中的动态选择中删除重复值？

Question

试图弄清楚没有这样的运气。基本上，我们使用从中检索的服务中的值填充选择。但是在选择中有重复。这是正在执行此操作的代码。我想删除“theProduct.name”中返回的重复项。我知道之前已经问过这个问题，但我无法弄清楚这一点。附加的图像是选择它发生的位置。感谢

 function populateSearchProducts(data) {

    var theData = data.data.results;
     $field.empty().append('<option value="">&nbsp;</option>');

    for (var p in theData) {
      var theProduct = theData[p];
      $field.append('<option value="'+theProduct.id+'">'+theProduct.name+'</option>');
    }
 }

Answer 1

尝试使用过滤器从输入数据中删除重复项：

function populateSearchProducts(data) {

    var theData = data.data.results.filter(function(item, pos, self) {
        return self.indexOf(item) == pos;
    });

    $field.empty().append('<option value="">&nbsp;</option>');

    for (var p in theData) {
      var theProduct = theData[p];
      $field.append('<option value="'+theProduct.id+'">'+theProduct.name+'</option>');
    }
}

Answer 2

 function populateSearchProducts(data) {
     data = data.data.results;

     const dupes = new Set();

     for(const {name, id} of Object.values(data)){
          if(dupes.has(name)) continue;
          $field.append(`<option value='${id}' > ${name} </option>`);              
          dupes.add(name);
     }
 }

Answer 3

您可以跟踪已添加到DOM中的项目，然后在添加新元素之前使用过滤器。

在下面的代码中，过滤器会查看每个元素的id以将其过滤掉。如果需要，可以使用name（或任何其他属性）来检测重复项并将其过滤掉。

有些事情：

＆＃13;

＆＃13;

var dataArray = [
  {id: 1, name: 'one'},
  {id: 2, name: 'two'},
  {id: 3, name: 'three'},
  {id: 4, name: 'four'},
  {id: 2, name: 'two'}, // dupe
  {id: 5, name: 'five'},
  {id: 3, name: 'three'} // dupe
]

function populateSearchProducts(data, $field) {
    //var theData = data.data.results;
    var theData = data;
    
    $field.empty().append('<option value="">&nbsp;</option>');
    // to keep track of the ones already in the drop-down
    var alreadyAdded = [];
    
    for (let p of theData) {
      if(alreadyAdded.filter( item => item.id === p.id ).length <= 0 ){
            $field.append('<option value="'+p.id+'">'+p.name+'</option>');
            alreadyAdded.push(p);
      }      
    }    
 }
 
 // when docuemnt ready, populate the field
 $(function(){
    var field = $("#selOptions");
    populateSearchProducts(dataArray, field);
 });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select id="selOptions" />

＆＃13;

＆＃13;

＆＃13;

根据评论更新