javascript - 如何阻止查询结果在 html 选项下拉框中重复？

Question

使用 parse.com 和 Javascript SDK。

更新 - 我创建了一个 fiddle 来显示问题 http://jsfiddle.net/Dano007/j8vgqvqg/11/

以下代码返回当前用户连接的好友列表。然后，它将结果显示在选项下拉框中，供用户选择 friend 。有 3 条记录正在解析，状态为“已连接”，Chrome 中的检查元素中也显示了 3 条记录。

由于某种原因，当结果显示在下拉框中时，它们会被重复。

我需要同时包含 toUser 和 fromUser，否则仅使用其中之一，您只能获得 1/2 的好友连接。

如何停止下拉框中的重复？一个有效的例子/答案将会很棒!

 ![var currentUser = Parse.User.current();
         var FriendRequest = Parse.Object.extend("FriendRequest");

        var queryOne = new Parse.Query(FriendRequest);
        queryOne.equalTo("toUser", currentUser);


        var queryTwo = new Parse.Query(FriendRequest);
        queryTwo.equalTo("fromUser", currentUser);

        var mainQuery = Parse.Query.or(queryOne, queryTwo);
        //mainQuery.include('toUser');
        mainQuery.include('fromUser');
        mainQuery.equalTo("status", "Connected");


            mainQuery.find({
            success: function(results) {
                var friends = \[\];
                for (var i = 0; i < results.length; i++) {
                    friends.push({
                        username: results\[i\].get('fromUser').get('username'),

                        userId: results\[i\].get('fromUser').id,



                    });
                    var select = document.getElementById("selectFriend");
                    $.each(friends, function(i, v) {
                        var opt = v.userId;
                        var optfrontend = v.username;

                        var el = document.createElement("option");
                        el.textContent = optfrontend;
                        el.value = opt;
                        select.appendChild(el);
                    })

                }
            },

            error: function(error) {
                alert("Error: " + error.code + " " + error.message);
            }
         });

HTML

                <option value="0">Select a friend</option>

Answer 1

您可以使用$.unique()从数组中删除重复项:

friends = $.unique( friends );

未经测试，但也可以直接在 $.each 中工作:

$.each($.unique(friends), function(i, v) { ...

更新:由于使用 $.unique() 不适用于 friends 数组，因此 friends 可能由具有相同的用户名，但其他值不同 - 那么可以使用以下方法:

var added = {};
$.each(friends, function(i, v) {
    var opt = v.userId;
    var optfrontend = v.username;
    if(!added[optfrontend])
    {
      added[optfrontend]= true;

      var el = document.createElement("option");
      el.textContent = optfrontend;
      el.value = opt;
      select.appendChild(el);
    }
});

演示 Fiddle

这只会将用户名添加到之前未添加的选项中，方法是在处理 $.each() 时检查 added[optfrontend] 是否为 true 。

作为旁注 - 当您使用 jQuery 时，您也可以使用

var select = $("#selectFriend");

而不是

var select = document.getElementById("selectFriend");

但是你必须改变

select.appendChild(el);

进入

select.append(el);

更新:当此方法中使用的 var added = {}; 在全局范围内声明时，建议的方法有效，因此可以在 内部访问它每个()。如果它是在 each() 上方声明的，但在 OP 代码中的另一个函数内部，则它在 each() 内部将是未定义的。