Jquery循环重复创建相同的对象答案

【问题标题】：Jquery loop creating same objects repeatedlyJquery循环重复创建相同的对象
【发布时间】：2021-10-24 17:03:44
【问题描述】：

我有一个循环来填充 select2 的选项。如果我在我的 url 中选择了参数，我会从后端获取数据并在加载页面时自动填充它。所以我为它创建了 2 个循环。但它的生成选项多次。它创建的选项（DOM）与我的数组长度相同，我从 url 中的参数创建了一个数组。感谢您的帮助。

var myArr = urlProjects.split(",");
for (var i = 0; i < data.data.length; i++) {
    myArr.forEach(e => {
        if (parseInt(e) === data.data[i].id) {
            var option = new Option(data.data[i].name, data.data[i].id, false, true);
            element.select2().append(option);
            projectsArr.push(data.data[i].id);
        } else {
            var option = new Option(data.data[i].name, data.data[i].id, false, false);
            element.select2().append(option);
        }
    })
}

urlProjects (example) = 12877,12618,10925

data.data (array of objects- example object) = {
    "id": 12573,
    "name": "TEST",
    "clientID": 1119,
    "rsid": "23bdb244-c92b-42d6-bc58-3282edf27d08",
    "clientName": "test",
    "clients": {
        "client_id": 1119,
        "name": "test",
        "opClientName": "[test]"
    }
}

【问题讨论】：

urlProjects 和 data.data（示例数据）中有什么？
我更新了帖子
您检查过您的代码执行的频率吗？也许您应该在代码之前删除所有选项，以确保您永远不会有重复条目
您当然还有一些其他相关代码，并调用您在某个侦听器中提供的这段代码。 element.select2() 是什么？一些图书馆的使用？ projectsArr 是什么？
这是你在 foreach 循环中的 else 语句。如果您在 data 和 myArr 之间没有匹配，则无论如何都会放置一个元素。 myArr 正在循环遍历每个数据元素，因此您将拥有 data.length * myArr.length 个元素

标签： javascript jquery arrays loops

【解决方案1】：

问题是你总是附加选项，但你应该重新填充数组。

所以，试着调整你的代码如下：

var myArr = urlProjects.split(",");

element.select2() = element.select2(); // Don't have a clue what element.select2() does, from code it looks like it returns an array - so you have to adjust this part. Idea is to empty the array of your option elements.
projectsArr = []; // More-less same here.

// And then - actually, re-fill your arrays again.
for (var i = 0; i < data.data.length; i++) {
    myArr.forEach(e => {
        if (parseInt(e) === data.data[i].id) {
            var option = new Option(data.data[i].name, data.data[i].id, false, true);
            element.select2().append(option);
            projectsArr.push(data.data[i].id);
        } else {
            var option = new Option(data.data[i].name, data.data[i].id, false, false);
            element.select2().append(option);
        }
    })
}

有一些更优化的方法 - 检查您的数组是否已经包含一些元素，然后只推送新元素和/或更新现有元素。

【讨论】：