JS合并数组对象中重复数据[通俗易懂]

JS合并数组对象中重复数据[通俗易懂]数组重组数据源数据:目标数据://源数据varoldData=[{city_id:1,city_name:’北京’,city_img:”http://dfknbdjknvkjsfnvlkjdn.png”,city_country:”中国”},{city_id:2,city_name:’上海’,city_img:”http://wergerbe.png”,city_country

数组重组数据
源数据:
在这里插入图片描述
目标数据:
在这里插入图片描述

// 源数据
var oldData = [
  { 
   
    city_id: 1,
    city_name: '北京',
    city_img: "http://dfknbdjknvkjsfnvlkjdn.png",
    city_country: "中国"
  },
  { 
   
    city_id: 2,
    city_name: '上海',
    city_img: "http://wergerbe.png",
    city_country: "中国"
  },
  { 
   
    city_id: 3,
    city_name: '广州',
    city_img: "http://hrthhr.png",
    city_country: "中国"
  },
  { 
   
    city_id: 4,
    city_name: '西雅图',
    city_img: "http://frevfd.png",
    city_country: "美国"
  },
  { 
   
    city_id: 5,
    city_name: '纽约',
    city_img: "http://反而个.png",
    city_country: "美国"
  }
]
 
// 把源数据先变成目标数据的规则
var oldDataRule = []
oldData.forEach(el => { 
   
  var oldObj = { 
   
    name: el.city_country,
    citys:[]
  }
  var cityObj = { 
   
    city_name: el.city_name,
    city_img: el.city_img,
    city_id: el.city_id
  }
  oldObj.citys.push(cityObj)
  oldDataRule.push(oldObj)
})
 
/** * 先去重,后合并 * 1、源数据去重 * 2、把去重后的数据和源数据中相同name的数据合并citys */
var newData = []
var newObj = { 
   }
oldDataRule.forEach((el, i) => { 
   
  if (!newObj[el.name]) { 
   
    newData.push(el);
    newObj[el.name] = true;
  } else { 
   
    newData.forEach(el => { 
   
      if (el.name === oldDataRule[i].name) { 
   
        el.citys = el.citys.concat(oldDataRule[i].citys);
        // el.citys = [...el.citys, ...oldDataRule[i].citys]; // es6语法
      }
    })
  }
})
console.log(newData); // 目标数据

结果:
在这里插入图片描述

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/226716.html原文链接:https://javaforall.net

赞 (0)
全栈程序员-站长的头像全栈程序员-站长

相关推荐

  • pycharm2021.11.3激活教程【中文破解版】「建议收藏」

    (pycharm2021.11.3激活教程)好多小伙伴总是说激活码老是失效,太麻烦,关注/收藏全栈君太难教程,2021永久激活的方法等着你。IntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,下面是详细链接哦~https://javaforall.net/100143.html6EK6WKOHUX-eyJsaWNlbnNlSWQi…

    2022年3月28日
  • 无法定位程序输入点 zend_empty_string php7.dll

    无法定位程序输入点 zend_empty_string php7.dll

    2021年11月7日
  • 嵌入式linux基础学习全套精品视频教程

    嵌入式linux基础学习全套精品视频教程嵌入式linux基础学习全套精品视频教程在给大家分享教程之前,首先给大家简要的介绍一下嵌入式linux,嵌入式linux是将日益流行的Linux操作系统进行裁剪修改,使之能在嵌入式计算机系统上运行的一种操作系统。嵌入式linux既继承了Internet上无限的开放源代码资源,又具有嵌入式操作系统的特性。本教程是嵌入式linux基础学习全套精品视频教程,比较适合嵌入式初级学员们学习,需要

    2022年5月16日
  • Mybatis的mapper返回map结果集(超详细讲解)[通俗易懂]

    Mybatis的mapper返回map结果集(超详细讲解)[通俗易懂]通过@MapKey指定map的key值1.在接口中写方法/***@author:xjszsd*@date:2021-12-1316:20*/publicinterfaceIAccountDao{//返回一条记录的map;key就是列名,值就是对应的值Map<String,Object>selectAll(Integerid);/***此处若将map的key的类型改为其他类型,不影响@MapKey给map的ke

    2022年10月4日
  • verycd下载办法_不提供是什么意思

    verycd下载办法_不提供是什么意思现在verycd不提供下载了,我们少了一个重要的资源下载地址。以前是影视剧不能下载,现在是所有东西全部不可以下载。难道我们没有其他方可以下载吗?还是有的,而且比verycd开放的功能还多。verycd不提供下载的解决办法:simplecd还可以提供下载,甚至影视剧也可以下载。SimpleCD专注于为VeryCD做简单的备份,同时也提供了基本的搜索和列

    2022年8月10日
  • 接口与抽象类的区别

    接口和抽象类有什么区别你选择使用接口和抽象类的依据是什么?接口和抽象类的概念不一样。接口是对动作的抽象,抽象类是对根源的抽象。抽象类表示的是,这个对象是什么。接口表示的是,这个对象能做什么。比如

    2021年12月24日

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号