新手求助：如何用jQuery和AJAX将JSON结果集按层级分组到div中？

嘿，作为AJAX和jQuery初学者，碰到这种分组问题太正常了，别着急！我来帮你搞定这个需求。首先明确你的目标：把返回的JSON数组按subcategory字段分组，每个分类下关联对应的subgroup列表对吧？

第一步：先梳理你的原始数据 #

你返回的JSON结构我先补全省略部分，大概是这样：

{
  "success": [
    {"id":8,"subcategory":"SubCategory 1","subgroup":"Subgroup 1"},
    {"id":9,"subcategory":"SubCategory 1","subgroup":"Subgroup 2"},
    {"id":10,"subcategory":"SubCategory 2","subgroup":"Subgroup 3"},
    {"id":11,"subcategory":"SubCategory 2","subgroup":"Subgroup 4"}
  ]
}

第二步：用jQuery实现分组逻辑 #

我们可以用jQuery的$.each()方法遍历数组，同时创建一个对象来存储分组结果——键是subcategory的值，值是对应分类下的subgroup数组：

// 假设AJAX请求返回的数据存在response变量里
var response = {"success":[{"id":8,"subcategory":"SubCategory 1","subgroup":"Subgroup 1"},{"id":9,"subcategory":"SubCategory 1","subgroup":"Subgroup 2"},{"id":10,"subcategory":"SubCategory 2","subgroup":"Subgroup 3"},{"id":11,"subcategory":"SubCategory 2","subgroup":"Subgroup 4"}]};

// 创建空对象存储分组结果
var groupedData = {};

// 遍历success数组
$.each(response.success, function(index, item) {
  var category = item.subcategory;
  // 如果当前分类还没在分组对象里，先初始化一个空数组
  if (!groupedData[category]) {
    groupedData[category] = [];
  }
  // 把当前的subgroup添加到对应分类的数组中
  groupedData[category].push(item.subgroup);
});

console.log(groupedData);

执行这段代码后，groupedData的结果就是你要的分组结构：

{
  "SubCategory 1": ["Subgroup 1", "Subgroup 2"],
  "SubCategory 2": ["Subgroup 3", "Subgroup 4"]
}

进阶调整：保留完整的条目对象 #

如果你不想只存subgroup，而是想保留每个条目的完整信息，只需要把push(item.subgroup)改成push(item)就行，这样每个分类下的数组就是该分类对应的所有原始对象了。

小补充：原生JS的简洁写法 #

如果你之后想拓展原生JS的能力，也可以用Array.reduce()方法实现，代码更紧凑：

var groupedData = response.success.reduce(function(result, item) {
  var category = item.subcategory;
  if (!result[category]) {
    result[category] = [];
  }
  result[category].push(item.subgroup);
  return result;
}, {});

不过既然你在学jQuery，先把$.each()的逻辑吃透就足够啦。

内容的提问来源于stack exchange，提问作者Rogero Wisehombre