JavaScript实现JSON数组按ID分组合并示例
本文介绍如何使用JavaScript对JSON数组进行分组合并操作。通过遍历数组并构建映射对象,将具有相同ID的数据项合并为包含子数组的单个对象,从而简化数据结构。
JavaScript实现JSON数组分组合并示例
本文通过具体示例,详细讲解在JavaScript中对JSON数组进行分组合并的处理方法。
<script>
var arr = [
{"id":"1001","name":"值1","value":"111"},
{"id":"1001","name":"值1","value":"11111"},
{"id":"1002","name":"值2","value":"25462"},
{"id":"1002","name":"值2","value":"23131"},
{"id":"1002","name":"值2","value":"2315432"},
{"id":"1003","name":"值3","value":"333333"}
];
var map = {},
dest = [];
for(var i = 0; i < arr.length; i++){
var ai = arr[i];
if(!map[ai.id]){
dest.push({
id: ai.id,
name: ai.name,
data: [ai]
});
map[ai.id] = ai;
}else{
for(var j = 0; j < dest.length; j++){
var dj = dest[j];
if(dj.id == ai.id){
dj.data.push(ai);
break;
}
}
}
}
console.log(dest);
/*
//运行结果:
[
{
"id": "1001",
"name": "值1",
"data": [
{"id": "1001", "name": "值1", "value": "111"},
{ "id": "1001", "name": "值1", "value": "11111"}
]
},
{
"id": "1002",
"name": "值2",
"data": [
{ "id": "1002", "name": "值2", "value": "25462" },
{ "id": "1002", "name": "值2", "value": "23131"},
{"id": "1002", "name": "值2","value": "2315432" }
]
},
{
"id": "1003",
"name": "值3",
"data": [
{"id": "1003", "name": "值3", "value": "333333" }
]
}
]
*/
</script>
您可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.jb51.net/code/HtmlJsRun来测试上述代码,运行结果如下所示:

PS:关于json操作,这里再为大家推荐几款比较实用的json在线工具供大家参考使用:
在线JSON代码检验、检验、美化、格式化工具: http://tools.jb51.net/code/json
JSON在线格式化工具: http://tools.jb51.net/code/jsonformat
在线XML/JSON互相转换工具: http://tools.jb51.net/code/xmljson
json代码在线格式化/美化/压缩/编辑/转换工具: http://tools.jb51.net/code/jsoncodeformat
在线json压缩/转义工具: http://tools.jb51.net/code/json_yasuo_trans
更多关于JavaScript相关内容可查看本站专题:《JavaScript中json操作技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。
JavaScript入门书籍避坑:这些书不适合初学者
2026-11-05 16:31:15
JS使用Math.round实现保留两位小数的原理与代码
2026-11-05 15:35:55
JavaScript 原生 Date 对象怎么实现日期加减
2026-11-05 14:30:00
JavaScript函数定义的三种方式:声明、表达式与箭头函数
2026-11-05 13:50:55
JavaScript中escape、encodeURI和encodeURIComponent对空格的处理差异
2026-11-05 12:47:23
