如何仅向数据列表元素添加唯一选项

Question

每当用户单击输入字段时，我试图从服务器获取一组对象，并将它们的属性作为选项添加到数据列表元素中。我只想在列表中显示唯一的选项，然而，每当输入字段成为焦点时，我的代码就会不断地将每个选项添加到数据列表中，即使我正在检查是否不这样做。

<form action="">
<label for="">Step 1: Select or create a theme: </label>
<input type="input" list="themes" name="themes" onfocus="fetchThemes()" />
<datalist id="themes">
</datalist>
</form>
<script>
let host = "http://localhost:3002"
function fetchThemes(){
fetch(host + "/contents")
.then((response) => response.json())
.then((data) => addToDatalist(data))
}
function addToDatalist(data){
let datalist = document.getElementById('themes');
for (let object of data){
let option = document.createElement("option")
option.value = object.name
if (datalist.contains(option) === false){
datalist.appendChild(option)
} 
}
console.log(document.getElementById('themes'))
}
</script>

我知道我错过了一些小事情，但我不确定我做错了什么。DOM元素是否类似于Python或Java中的对象，即使两个对象可以具有相同的值，但由于它们存储在不同的内存位置，因此它们被认为是不同的？我该怎么着手解决这个问题？

Answer 1

我制作了两个数组，第一个是检查包含所有唯一值的数组，第二个是服务器"object"的响应。

在这里，我将check数组的所有值与对象的一个值进行比较，以获得唯一值！！！

我希望这对你有帮助！！！

//将对象视为一个选项数组，并且只希望包含唯一的选项var check=[]

var object = []
for(const i=0;i<=object.length;i++)
{
for(const j=0;j<=check.length;j++)
{
if(check[j] ===option[i])
{
console.log("Value exists")
}
else{
option.value = check[j]
}
}
}
for(const i=0;i<=check.length;i++)
{
option.value = check[i]
}