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

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全家桶1年46,售后保障稳定

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

// 源数据
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); // 目标数据

Jetbrains全家桶1年46,售后保障稳定

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

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

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

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


相关推荐

  • 用Python实现Linux tree命令

    用Python实现Linux tree命令早就耳闻python功能强大,互联网领域运用广泛,Scrapy爬虫框架、OpenStack云存储架构都是用Python实现的。最近下定决心,开始学习Python。先参考网上的demo写一个小例子,实现linuxtree命令。#!/usr/bin/pythonimportos,sys,stringclassXXXTree:def__init__(self):

    2022年7月24日
    10
  • uint32 java_关于Java的int和C的uint32之间的转换

    uint32 java_关于Java的int和C的uint32之间的转换最近在做一个项目,是Android程序跟单片机之间通讯的,需求是Android程序给单片机发送一堆数据之后,要对这些数据进行CRC校验,手机端自己算一个校验值,发送给单片机,由单片机跟单片机部分算出的校验值做对比,一致则通过校验,不一致则校验失败。刚开始用Java自带的CRC校验类做校验,用CRC校验工具测试,结果一致,于是满怀信心的开始跟单片机正式测试,结果校验失败。以为是大小端的原因,就改了下…

    2025年9月27日
    2
  • 表格图片加载不出来,破图,加载失败怎么办_ie网页表格显示不出来

    表格图片加载不出来,破图,加载失败怎么办_ie网页表格显示不出来表格图片加载不出来,破图,加载失败el-upload组件将图片上传至服务器<templateslot-scope=”scope”slot=”wjmcForm”><el-upload:headers=”headers”:show-file-list=”false”…

    2025年8月6日
    3
  • vim命令多行操作

    vim命令多行操作一、文件内多行注释:1.按esc进入命令行模式下,按下Ctrl+v,进入列(也叫区块)模式;2.在命令模式下h键或j键选择需要注释的多行;3.按下(大写)“i”键,进入插入模式;4.输入注释符#或//5.最后按下“Esc”键。注:在按下esc键后,即可出现二、文件内删除多行注释:1.首先按esc进入命令行模式下,按下Ctrl+v,进入列模式…

    2022年6月26日
    103
  • oracle锁表_数据库锁表如何解决

    oracle锁表_数据库锁表如何解决1、执行以下语句可查询被锁的表selectb.owner,b.object_name,a.session_id,a.locked_modefromv$locked_objecta,dba_objectsbwhereb.object_id=a.object_id;2、执行以下语句可查询被锁的session和serialselectb.username,b.sid,b.serial#,logon_timefromv$locked_objecta,v$session.

    2022年8月23日
    7
  • qtabwidget tab样式_qt geometry

    qtabwidget tab样式_qt geometrytabWidget=newQTabWidget();tabWidget->setUsesScrollButtons(true);//使QTabWidget显示滚动条tabWidget->setTabsClosable(true);//设置tab的关闭选项tabWidget->setTabsClosable(true)…

    2022年9月23日
    1

发表回复

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

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