js处理json数据(合并键值对相同的数据,指定键值对相加或拼接)、前端实现

简介: js处理json数据(合并键值对相同的数据,指定键值对相加或拼接)、前端实现

方法:

// 将相同name的进行分组
          for (let i = 0; i < newArr1.length; i++) {//newArr1为原始json数据
            // 利用some函数来区分是否相同
            if (
              !obj.some(item => item.name === newArr1[i].name &&
                item.width === newArr1[i].width &&
                item.height === newArr1[i].height &&
                item.widthDeviation === newArr1[i].widthDeviation &&
                item.heightDeviation === newArr1[i].heightDeviation &&
                item.tempered === newArr1[i].tempered &&
                item.floorNum === newArr1[i].floorNum &&
                item.processRequirements === newArr1[i].processRequirements &&
                item.remark === newArr1[i].remark
              )) {
              obj.push(newArr1[i])

              arr.push({
                gname: newArr1[i].name,
                gwidth: newArr1[i].width,
                gheight: newArr1[i].height,
                gwidthDeviation: newArr1[i].widthDeviation,
                gheightDeviation: newArr1[i].heightDeviation,
                gtempered: newArr1[i].tempered,
                gfloorNum: newArr1[i].floorNum,
                gprocessRequirements: newArr1[i].processRequirements,
                gremark: newArr1[i].remark,
                data: [newArr1[i]]
              })
            } else {
              // 把那些和键值相同的条目放入分组(玻璃名)
              for (let k = 0; k < arr.length; k++) {
                if (arr[k].gname === newArr1[i].name &&
                  arr[k].gwidth === newArr1[i].width &&
                  arr[k].gheight === newArr1[i].height &&
                  arr[k].gwidthDeviation === newArr1[i].widthDeviation &&
                  arr[k].gheightDeviation === newArr1[i].heightDeviation &&
                  arr[k].gtempered === newArr1[i].tempered &&
                  arr[k].gfloorNum === newArr1[i].floorNum &&
                  arr[k].gprocessRequirements === newArr1[i].processRequirements &&
                  arr[k].gremark === newArr1[i].remark
                ) {
                  arr[k].data.push(newArr1[i])
                }
              }
            }
          }
const arr2 = []
        var newArr1s = []
        // 循环分组数据即可,然后针对特定项目做处理
        // 注意点在于三元表达式,因为数组必须有两个才能用reduce函数(缩减函数)
        arr.forEach(item => {
          console.log(`j88888---`, item)
          arr2.push({
            // name: item.data.map(item => item.name).join(','),
            name: item.gname,
            width: item.gwidth,
            height: item.gheight,
            widthDeviation: item.gwidthDeviation,
            heightDeviation: item.gheightDeviation,
            number: item.data.length > 1 ? item.data.map(item => item.number).reduce((pre, next) => pre + next) : item.data[0].number,//此处为相加方法
            price: item.data[0].price,
            tempered: item.gtempered,
            floorNum: item.gfloorNum ? item.gfloorNum : item.data.map(item => item.floorNum).join(','),
            processRequirements: item.gprocessRequirements ? item.gprocessRequirements : item.data.map(item => item.processRequirements).join(','),//此处为字符串拼接方法
            remark: item.gremark ? item.gremark : item.data.map(item => item.remark).join(',')
            // tempered: this.sss,
            // name: item.data[0].name
          })
        })

来看对比图:
合并前:
在这里插入图片描述
合并后:
在这里插入图片描述
需要的可直接贴代码。

相关文章
|
8天前
|
JavaScript 前端开发 API
详解队列在前端的应用,深剖JS中的事件循环Eventloop,再了解微任务和宏任务
该文章详细讲解了队列数据结构在前端开发中的应用,并深入探讨了JavaScript的事件循环机制,区分了宏任务和微任务的执行顺序及其对前端性能的影响。
|
6天前
|
JavaScript 前端开发 小程序
一小时入门Vue.js前端开发
本文是作者关于Vue.js前端开发的快速入门教程,包括结果展示、参考链接、注意事项以及常见问题的解决方法。文章提供了Vue.js的基础使用介绍,如何安装和使用cnpm,以及如何解决命令行中遇到的一些常见问题。
一小时入门Vue.js前端开发
|
9天前
|
存储 前端开发 JavaScript
前端基础(三)_JavaScript数据类型(基本数据类型、复杂数据类型)
本文详细介绍了JavaScript中的数据类型,包括基本数据类型(Number、String、Boolean、Undefined、Null)和复杂数据类型(Object),并解释了如何使用`typeof`操作符来识别变量的数据类型。同时,还讨论了对象、函数和数组等复杂数据类型的使用方式。
13 2
|
8天前
|
JSON JavaScript 前端开发
6-19|Python数据传到JS的方法
6-19|Python数据传到JS的方法
|
8天前
|
JavaScript 前端开发 开发者
深入浅出 Vue.js:构建响应式前端应用
Vue.js 是一个流行的前端框架,以其简洁、高效和易学著称。它采用响应式和组件化设计,简化了交互式用户界面的构建。本文详细介绍 Vue.js 的核心概念、基本用法及如何构建响应式前端应用,包括实例、模板、响应式数据和组件等关键要素,并介绍了项目结构、Vue CLI、路由管理和状态管理等内容,帮助开发者高效地开发现代化前端应用。
|
8天前
|
JavaScript 前端开发
网页前端课程设计-【模仿】香港中文大学官网,轮播图及div+css布局,js的dom操作
这篇文章介绍了如何模仿香港中文大学官网进行网页前端课程设计,包括使用div+css布局、js的DOM操作以及实现轮播图等技术细节。
|
9天前
|
前端开发 JavaScript
前端JS控制网页复制粘贴
前端JS控制网页复制粘贴
|
9天前
|
前端开发 JavaScript
前端JS截取url上的参数
文章介绍了两种前端JS获取URL参数的方法:手动截取封装和使用URLSearchParams。
21 0
|
10天前
|
XML 存储 JSON
Twaver-HTML5基础学习(19)数据容器(2)_数据序列化_XML、Json
本文介绍了Twaver HTML5中的数据序列化,包括XML和JSON格式的序列化与反序列化方法。文章通过示例代码展示了如何将DataBox中的数据序列化为XML和JSON字符串,以及如何从这些字符串中反序列化数据,重建DataBox中的对象。此外,还提到了用户自定义属性的序列化注册方法。
27 1
|
7天前
|
存储 JSON Go
在Gin框架中优雅地处理HTTP请求体中的JSON数据
在Gin框架中优雅地处理HTTP请求体中的JSON数据

热门文章

最新文章

下一篇
无影云桌面