[英]How to handle repeating values in JQuery
I'm trying to dynamically render values I am pulling from SQL that looks like this:我正在尝试动态呈现我从 SQL 中提取的值,如下所示:
into something that looks like this:变成这样的东西:
I already have HTML and CSS placed and I am approaching this using $.each but I cant seem to populate the inside of the view tree:我已经放置了 HTML 和 CSS,我正在使用 $.each 来处理这个问题,但我似乎无法填充视图树的内部:
EDIT:编辑:
here is my script:这是我的脚本:
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);
});
});
For this type of data you need to group by.对于此类数据,您需要分组依据。
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>
Perhaps you need an intermediate step where you construct an array modelling the second image you have there.也许您需要一个中间步骤,在该步骤中构建一个数组,对那里的第二张图像进行建模。 Something like:
就像是:
// Do this before $.each()
var sql_data = {
Forms: [],
Energy: []
};
// Inside of $.each() do something like this:
sql_data[col_1].push(col_2);
Where "col_1" and "col_2" are respectively the first and second columns in your data.其中“col_1”和“col_2”分别是数据中的第一列和第二列。 Then you can use that "sql_data" object to create the HTML that you need.
然后你可以使用那个“sql_data”object来创建你需要的HTML。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.