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

问题描述 投票:0回答:1

我试图从服务器上获取一组对象,并将它们的属性作为选项添加到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中的对象,即使两个对象可以具有相同的值,但由于它们存储在单独的内存位置中,因此它们被认为是不同的?我该如何解决这个问题?

javascript html
1个回答
0
投票

我制作了两个数组,第一个是检查包含所有唯一值的数组,第二个是服务器“对象”的响应。]

这里,我正在将检查数组的所有值与对象的一个​​值进行比较,以获得唯一的值!!

我希望这对您有帮助!!!

//将对象视为选项的数组,而您只想包含唯一的一个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]
}
© www.soinside.com 2019 - 2024. All rights reserved.