如何處理 JQuery 中的重復值

Question

我正在嘗試動態呈現我從 SQL 中提取的值，如下所示：

變成這樣的東西：

我已經放置了 HTML 和 CSS，我正在使用 $.each 來處理這個問題，但我似乎無法填充視圖樹的內部：

編輯：

這是我的腳本：

AjaxGet('GetUserAppFeatures', { "uid": userid }, false, true)
        .success(function (result) {

            $.each(result.model, function (val) {

                var li = $('<li></li>');

                li.append('<span class="caret">' + result.model[val].AppName + '</span> <input type="checkbox" id="chkApp' + result.model[val].AppId + '">');

                var ul = $('<ul class="nested"></ul>');
                $.each(result.model[val], function (index) {

                    ul.append('<li>' + result.model[val].FeatureName[index] + '</li> <input type="checkbox" id="chkApp' + result.model[val].FeatureId[index] + '">');

                    li.append(ul);
                });


                treeview.append(li);

            });

        });

Answer 1

對於此類數據，您需要分組依據。

 var yourData = [ {Name: "Forms", value: "Request"}, {Name: "Forms", value: "Report"}, {Name: "Forms", value: "Password"}, {Name: "Energy", value: "Report"}, {Name: "Energy", value: "CUstomer Multiplier"}, {Name: "Energy", value: "Product Feedback"}, ]; Renderdata(); function Renderdata(){ var data = groupBy(yourData,"Name"); var html = ''; for(var i= 0; i < data.length; i++){ html += "<div>"+data[i][0].Name+" </div>"+"<ul>"; for(var j= 0; j < data[i].length; j++){ html += "<li>"+data[i][j].value+"</li>"; } html += "</ul>"; } $('#div').html(html); } function groupBy(collection, property) { var i = 0, val, index, values = [], result = []; for (; i < collection.length; i++) { val = collection[i][property]; index = values.indexOf(val); if (index > -1) result[index].push(collection[i]); else { values.push(val); result.push([collection[i]]); } } return result; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="div"></div>

Answer 2

也許您需要一個中間步驟，在該步驟中構建一個數組，對那里的第二張圖像進行建模。 就像是：

// Do this before $.each()
var sql_data = {
    Forms: [],
    Energy: []
};


// Inside of $.each() do something like this:
sql_data[col_1].push(col_2);

其中“col_1”和“col_2”分別是數據中的第一列和第二列。 然后你可以使用那個“sql_data”object來創建你需要的HTML。