es6 vue 分组 某个共同字段_js根据json数据中的某一个属性来给数据分组的方法

最新推荐文章于 2024-08-20 15:36:23 发布
原创 最新推荐文章于 2024-08-20 15:36:23 发布 · 860 阅读 · 2 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
标签
#es6 vue 分组 某个共同字段
本文介绍了如何使用JavaScript ES6语法，依据JSON对象数组中的某个共同字段进行数据分组。通过示例代码展示了将数据按照'Group'字段分组的过程，最终得到分组后的数据结构。

如下所示：

var arr = [{"Group":1,"Groupheader":"质量管理","Leftimg":"","Left":"","Min":"","Right":"","Rightimg":""},

{"Group":1,"Groupheader":"","Leftimg":"","Left":"","Min":"质量巡检","Right":"","Rightimg":""},

{"Group":2,"Groupheader":"设备管理","Leftimg":"","Left":"","Min":"","Right":"","Rightimg":""},

{"Group":2,"Groupheader":"","Leftimg":"","Left":"","Min":"设备专业点检","Right":"","Rightimg":""},

{"Group":2,"Groupheader":"","Leftimg":"","Left":"","Min":"设备日检","Right":"","Rightimg":""},

{"Group":2,"Groupheader":"","Leftimg":"","Left":"","Min":"设备周检","Right":"","Rightimg":""},

{"Group":2,"Groupheader":"","Leftimg":"","Left":"","Min":"设备月检","Right":"","Rightimg":""}];

var map = {},

dest = [];

for(var i = 0; i < arr.length; i++){

var ai = arr[i];

if(!map[ai.Group]){

dest.push({

Group: ai.Group,

data: [ai]

});

map[ai.Group] = ai;

}else{

for(var j = 0; j < dest.length; j++){

var dj = dest[j];

if(dj.Group == ai.Group){

dj.data.push(ai);

break;

}

}

}

}

console.log(JSON.stringify(dest));

var sapn = document.getElementById("span");

span.innerHTML = JSON.stringify(dest);

原始数据：

[{"Group":1,"Groupheader":"质量管理","Leftimg":"","Left":"","Min":"","Right":"","Rightimg":""},

{"Group":1,"Groupheader":"","Leftimg":"","Left":"","Min":"质量巡检","Right":"","Rightimg":""},

{"Group":2,"Groupheader":"设备管理","Leftimg":"","Left":"","Min":"","Right":"","Rightimg":""},

{"Group":2,"Groupheader":"","Leftimg":"","Left":"","Min":"设备专业点检","Right":"","Rightimg":""},

{"Group":2,"Groupheader":"","Leftimg":"","Left":"","Min":"设备日检","Right":"","Rightimg":""},

{"Group":2,"Groupheader":"","Leftimg":"","Left":"","Min":"设备周检","Right":"","Rightimg":""},

{"Group":2,"Groupheader":"","Leftimg":"","Left":"","Min":"设备月检","Right":"","Rightimg":""}];

处理后的数据：

[

{

"Group": 1,

"data": [

{

"Group": 1,

"Groupheader": "质量管理",

"Leftimg": "",

"Left": "",

"Min": "",

"Right": "",

"Rightimg": ""

},

{

"Group": 1,

"Groupheader": "",

"Leftimg": "",

"Left": "",

"Min": "质量巡检",

"Right": "",

"Rightimg": ""

}

]

},

{

"Group": 2,

"data": [

{

"Group": 2,

"Groupheader": "设备管理",

"Leftimg": "",

"Left": "",

"Min": "",

"Right": "",

"Rightimg": ""

},

{

"Group": 2,

"Groupheader": "",

"Leftimg": "",

"Left": "",

"Min": "设备专业点检",

"Right": "",

"Rightimg": ""

},

{

"Group": 2,

"Groupheader": "",

"Leftimg": "",

"Left": "",

"Min": "设备日检",

"Right": "",

"Rightimg": ""

},

{

"Group": 2,

"Groupheader": "",

"Leftimg": "",

"Left": "",

"Min": "设备周检",

"Right": "",

"Rightimg": ""

},

{

"Group": 2,

"Groupheader": "",

"Leftimg": "",

"Left": "",

"Min": "设备月检",

"Right": "",

"Rightimg": ""

}

]

}

]

以上这篇js根据json数据中的某一个属性来给数据分组的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

vue 根据数组对象属性值分类，把一个数组拆分为多个数组
xiubinxu的博客
07-31 1万+
前端必备技能之一,按需分类 有给的数据时候为了处理数据方便一些,后端给的数据可能不是我们想要的数据结构,这时候就需要你稍微做一点点的处理才能为自己所用 现在有这样一个数组,后端给的, policyDtos: [{clazzType: 1, clazzTypeText: '限签', remark: '严格限签', sourceTypeText: '地区收集'}, {clazzType: 2, clazzTypeText: '限售', remark: '限售', sourceTy
json数据根据某一个相同的字段值进行分类
qq_35168861的博客
03-02 2731
在我们处理json数据中经常会遇见数据分类问题，比如根据type值相同的分为一类，这个时候我们应该怎么做呢？下面就是自己封装的一个方法来进行分类： // 处理json数据方法，根据g_style分类 function dataDeal(data) { var listArr = []; data.forEach(function(el,index){ for(var...
Es6根据某个属性将数组分组
qq_21115567的博客
03-16 5301
Es6根据某个属性将数组分组: 比如如下数组,将根据sex字段来分组,sex为男的放到一起,为女的放到一起: [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bytLGUSj-1647394020189)(/img/bVcYwhv)] 主要代码如下: const array = [{ id: 1, name: ‘小明’, sex: ‘男’ }, { id: 3, name: ‘小红’, sex: ‘女’ }, { id: 2, name: ‘小刚’, sex: ‘男’ }, {
js中对象数组按照对象中某一个属性来进行分组
锦瑟年华L的博客
03-16 4308
在开发过程中，前端有时需要对后端返回的数据进行一些处理。当后端返回给我们json对象数组时，我们可能会需要按照对象中的某一个属性来进行分组，下面是我个人在项目中使用的一个方法： const groupBy=(array,f)=>{ constgroups={} array.forEach(function(o){ constgroup=JSON.stringify(f(o)) groups[group]=groups[group]||...
ES6集合操作-分组、去重、排序
tonysh_zds的博客
03-12 1956
注意：Chrome浏览器会将Lodash库作为开发工具的一部分加载到控制台中，从而使你能够直接在控制台中使用Lodash的方法(比如_.groupBy等)。2.3使用第三方库lodash的.keyBy()和.mapValues()方法。4.2使用第三方库lodash的_. orderBy()方法。3.4使用第三方库lodash的_.groupBy()方法。1.3使用第三方库lodash的_.uniq()方法。2.1使用Array.map()方法。3.3使用Array.map()方法。3、对象数组进行分组。
es6 vue 分组 某个共同字段_js对象数组(JSON) 根据某个共同字段 分组
weixin_33834241的博客
12-30 1495
希望的是将下面的对象数组：[{"id":"1","groupname":"值1","value":"11"},{"id":"2","groupname":"值1","value":"22"},{"id":"3","groupname":"值2","value":"33"},{"id":"4","groupname":"值2","value":"44"},{"id":"5","groupname":...
es6 vue 分组 某个共同字段_JS对象数组(JSON) 根据某个共同字段分组
weixin_39786155的博客
12-21 479
希望的是将下面的对象数组：[{"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":...
es6 vue 分组 某个共同字段_浅谈vue 多个变量同时赋相同值互相影响
weixin_33514864的博客
01-15 1208
首先，该项目用到了element-ui中的Tabs 标签；然后来龙去脉是酱紫的：一个项目中需动态渲染一个列表billItemLIsts，列表中包含ｎ组小列表，其中小列表的state_pj用于改变该小列表中的radio，于是：{{subitem.title}}:计费不计费那么现在列表效果达到了，然鹅这个tab得放到dialog中，且存在取消与确定操作，确定时不用多说，取消时改变了的radio是不会自...
vue2、vue3基于js给后端接口返回的数据（如以json数据为元素的数组）添加新的json字段
JCjunior的博客
02-09 4194
vue2、vue3基于js给后端接口返回的数据（如以json数据为元素的数组）添加新的json字段
Elasticsearch + Search UI 构建一个文件搜索引擎
最新发布
编码世界
08-20 2万+
无论是用于构建搜索引擎、日志分析、实时监控还是其他需要高效搜索和分析的场景，ElasticSearch都能提供强大的技术支持和灵活的配置选项，帮助用户快速响应业务需求。这样做的目的是将配置好的搜索功能集成到Vue应用程序中，SearchDriver可能负责处理搜索请求、更新搜索结果、管理状态等任务。config是之前定义的配置对象，包含了所有必要的设置以支持搜索操作。Elasticsearch查询的JSON配置，如引擎名称、端点基础、搜索密钥、结果字段、排序字段、过滤器、标题字段和URL字段。
vue拓扑图、组织结构图插件使用(orgChart.js)
热门推荐
张一西的博客
07-15 4万+
今天使用orgChart没有找到合适的，所以今天来写篇使用文档。 OrgChart.js是什么？ 基于ES6的组织结构图插件。 特征 支持本地数据和远程数据（JSON）。 基于CSS3过渡的平滑扩展/折叠效果。 将图表对齐为4个方向。 允许用户通过拖放节点更改组织结构。 允许用户动态编辑组织图并将最终层次结构保存为JSON对象。 支持将图表导出为图片。 支持平移和缩放 用户可以采用多种解决方案...
ES6（一）ES6的开发环境搭建(es6转码为es5)
weixin_44959855的博客
11-16 5601
Babel使用规则 Babel是一个广泛使用的转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。 这意味着，你可以现在就用 ES6 编写程序，而不用担心现有环境是否支持。下面是一个例子。 // 转码前 input.map(item => item + 1); // 转码后 input.map(function (item) { return item + 1; }); //上面的原始代码用了箭头函数，这个特性还没有得到广泛支持，Babel将其转为普通函数，就能在现有的JavaScrip
ES6中的Array.group()快速分类
weixin_53125679的博客
06-28 4001
ES6中的Array.group()快速分类组合数组
vue中将数组中的相同值得数据归类
陆仁丶的博客
10-27 2119
将同一个数组中的 相同字段值的数据归到一起组成新的数组 废话不多说直接上代码 let tempdata={} this.cartdata.forEach(str => { if (tempdata[str.applyOrg] != null) { tempdata[str.applyOrg].push(str) } else { let every = [] every.push(str)
vue，js中json对象数组按对象属性排序（sort方法）根据英文首字母进行排序
m0_52263688的博客
08-16 1535
vue，js中json对象数组按对象属性排序（sort方法）根据英文首字母进行排序
reduce:按属性对对象进行分类
qq_42931285的博客
05-04 633
reduce、对象分类
javascript:一个json数组，根据内部某个属性，将该属性值相同的合并到一块。
happy81997的博客
06-03 1817
javascript:一个json数组，根据内部某个属性，将该属性值相同的合并到一块。 需求： 一个json数组，根据内部某个属性，将该属性值相同的合并到一块；具有相同“tagName”的对象合并成新数组 数据情况： let resData = [ { "name": "住院医疗最高报销", "tagName": "医疗", "insuredAmount": "6000" }, { "name":
ES6的数据分组
hfdxmz_3的博客
05-11 3738
ItemGroupBy(arr, key) { let newArr = [], types = {}, newItem, i, j, cur; for (i = 0, j = arr.length; i < j; i++) { cur = arr[i]; if (!(cur[key] in types)) { types[cur[key]] = { type: cur[key], data: [.
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值