我试图从服务器上获取一组对象,并将它们的属性作为选项添加到datalist元素中,只要用户单击输入字段。我只想在列表中显示唯一选项,但是,只要输入字段成为焦点,我的代码就会一直将每个选项添加到数据列表中,即使我正在检查是否这样做也是如此。
<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中的对象,即使两个对象可以具有相同的值,但由于它们存储在单独的内存位置中,因此它们被认为是不同的?我该如何解决这个问题?
我制作了两个数组,第一个是检查包含所有唯一值的数组,第二个是服务器“对象”的响应。]
这里,我正在将检查数组的所有值与对象的一个值进行比较,以获得唯一的值!!
我希望这对您有帮助!!!
//将对象视为选项的数组,而您只想包含唯一的一个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]
}