jQuery：从 json 由特定键分隔的对象构建

Question

我的 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>

根据上面提供的数组构建此列表的最快、最灵活的方法是什么？

Answer 1

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>

jQuery：从 json 由特定键分隔的对象构建

jQuery: Building up ul from json objects seperated by specific key

javascript

jquery

json