删除重复的对象值，以便只返回唯一值（仅限 JS）（请不要 JQuery）

Question

我的情况很特殊。下面的代码中有两个下拉菜单。 Names 下拉列表根据从 Tags 下拉列表中选择的标签进行过滤。名称下拉列表将 return 属于对象中每个标签的所有值。

我想过滤标签值，因此只有唯一标签被 return编辑。

有了这个，我仍然想维护名称下拉列表的功能，这样属于每个标签的所有名称都是 returned。

简而言之，标签在标签下拉列表中必须是唯一的（无重复），而名称下拉列表中的名称保持其当前功能。

let result = [
  {name: "some name", tag: "some tag"},
  {name: "some name1", tag: "some tag1"},
  {name: "some name1-2", tag: "some tag1"},  
  {name: "some name2", tag: "some tag2"},
  {name: "some name2-2", tag: "some tag2"}
];

//Generic function to fill a dropdown with options 
let populateDropDown = (params) => {
    params.optionsToPopulate.forEach(item => {
        params.element.add(new Option(item[`${params.text}`], item[`${params.text}`]))
    })
}

//Initialize tags dropdown
(function(){
  document.getElementById("tags").addEventListener('change', (event) => {
    tagChanged(event);
  });

    let params = {
        optionsToPopulate:result,
        element:document.getElementById("tags"),
        id:"tag",
        text:"tag"
    }
    populateDropDown(params);

})();

//Tags dropdown change event.
let tagChanged = (event) => {   
    let tagValue = event.target.value;

    //filter the results based on the value of tags dropdown
    let optionsToAdd = result.filter(item => item.tag === tagValue);
    let names = document.getElementById("names");
    names.options.length=0;
    let params = {
        optionsToPopulate:optionsToAdd,
        element:names,
        id:"name",
        text:"name"
    }   
    populateDropDown(params);
}

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
  Tags: <select id="tags"></select> 

  <br><br><br>
  Names: <select id="names"></select>
</body>
</html>

Answer 1

因此请跟踪您插入的内容，不要重复插入。有很多方法可以做到，最简单的是使用 Set()

let result = [{
    name: "some name",
    tag: "some tag"
  },
  {
    name: "some name1",
    tag: "some tag1"
  },
  {
    name: "some name1-2",
    tag: "some tag1"
  },
  {
    name: "some name2",
    tag: "some tag2"
  },
  {
    name: "some name2-2",
    tag: "some tag2"
  }
];

//Generic function to fill a dropdown with options 
let populateDropDown = (params) => {
  let set = new Set()
  params.optionsToPopulate.forEach(item => {
    const txt = item[params.text];
    if (!set.has(txt)) {
      params.element.add(new Option(txt, txt))
       set.add(txt);
    }
  })
}

//Initialize tags dropdown
(function() {
  document.getElementById("tags").addEventListener('change', (event) => {
    tagChanged(event);
  });

  let params = {
    optionsToPopulate: result,
    element: document.getElementById("tags"),
    id: "tag",
    text: "tag"
  }
  populateDropDown(params);

})();

//Tags dropdown change event.
let tagChanged = (event) => {
  let tagValue = event.target.value;

  //filter the results based on the value of tags dropdown
  let optionsToAdd = result.filter(item => item.tag === tagValue);
  let names = document.getElementById("names");
  names.options.length = 0;
  let params = {
    optionsToPopulate: optionsToAdd,
    element: names,
    id: "name",
    text: "name"
  }
  populateDropDown(params);
}

<!DOCTYPE html>
<html>

<head>
  <title></title>
</head>

<body>
  Tags:
  <select id="tags"></select>

  <br><br><br> Names:
  <select id="names"></select>
</body>

</html>

Answer 2

提取标签属性的值并附加到列表中，然后使用 array.filter()

var arr = ["tag1","tag2","tag3","tag1","tag2","tag3","tag1","tag2","tag3"];

var filteredArray = arr.filter(function(item, pos){
  return arr.indexOf(item)== pos; 
});

console.log( filteredArray );

Answer 3

您可以在 populateDropDown()

中添加重复检测

//Generic function to fill a dropdown with options 
let populateDropDown = (params) => {
    console.log (params)
    let temp = [];
    params.optionsToPopulate.forEach(item => {
        if(temp.indexOf(item[`${params.text}`]) == -1){
            temp.push(item[`${params.text}`])
            params.element.add(new Option(item[`${params.text}`], item[`${params.text}`]))
        }
    })
}

删除重复的对象值，以便只返回唯一值（仅限 JS）（请不要 JQuery）

Remove duplicate object values so only unique values are returned (JS only) (No JQuery please)

javascript

arrays

object

dropdown