jQuery:从由特定键分隔的json对象中构建ul
jQuery:从由特定键分隔的json对象中构建ul
提问于 2015-01-06 19:17:01
我的ajax函数返回几个具有以下模式的JSON对象：
var data = [
{ 'category': 3, 'name': 'Max' },
{ 'category': 1, 'name': 'John' },
{ 'category': 2, 'name': 'Mary' },
{ 'category': 2, 'name': 'Dennis' },
{ 'category': 1, 'name': 'Louis' }
];具有相同类别的对象可以有不同的名称。
我的目标是建立一个基于jQuery按类别排序的对象的列表。下面是列表最终应该是什么样子：
<ul class="list">
<li class="category-divider">1</li>
<li class="element">John</li>
<li class="element">Louis</li>
<li class="category-divider">2</li>
<li class="element">Mary</li>
<li class="element">Dennis</li>
<li class="category-divider">3</li>
<li class="element">Max</li>
</ul>根据上面提供的数组来实现这个列表的构建，最快和最灵活的方法是什么？
回答 1
Stack Overflow用户
回答已采纳
发布于 2015-01-06 19:31:08
var data = [{
'category': 3,
'name': 'Max'
}, {
'category': 1,
'name': 'John'
}, {
'category': 2,
'name': 'Mary'
}, {
'category': 2,
'name': 'Dennis'
}, {
'category': 1,
'name': 'Louis'
}];
var list = $("<ul></ul>") // create list
var groupedData = {};
for (var i = 0; i < data.length; i++) { // group names by category
groupedData[data[i].category] = groupedData[data[i].category] || []; // check if it exists, if not set it as empty array
groupedData[data[i].category].push(data[i].name)
}
var categories = Object.keys(groupedData).sort(function(a,b){ return a -b}) // sort categories
for (var j = 0; j < categories.length; j ++) {
var cat = categories[j]
var category = $("<li class='category-divider'>" + cat + "</li>") // create category divider
for (var i = 0; i < groupedData[cat].length; i++) {
category.append("<li class='element'>" + groupedData[cat][i] + "</li>") // add names
}
list.append(category) // add category to list
}
$("body").append(list) // add list to body<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/27805620
复制相关文章
相似问题
腾讯云开发者
