vue3中前端处理不同数据结构的JSON

        有时候,后端返回的JSON数据格式,是前端不需要的格式类型,这时,要么让后端修改,你要什么格式,那么让后端大哥哥给你返回什么格式。但是有时候不尽人意,后端大哥哥让你自己转换,此时就甩给前端了,只能在前端自己处理了。

目录

1.对后端数据的字段值/字段进行操作

2.处理多层级的数据结构

3.对JSON的字段进行排序 

4.实际案例


1.对后端数据的字段值/字段进行操作

后端的JSON格式:

		//后端返回的数据格式
		var data = ref([{
				id: '00111322',
				name: 'zs01',
				age: 18
			},
			{
				id: '00035565644',
				name: 'ls02',
				age: 20
			}
		])

1.对字段的值进行更改

		//返回的格式
		var data1 = data.value.map(res => {
			return {
				...res, //...使用es6语法,表示每一个对象,这里指的就是 {id: '00111322',name: 'zs01',age: 18}
				id: Number(res.id), //把字符串转换数字类型
				age: res.age + 1, //给每一个人加一岁
				name: res.name.substring(0, 2) //把name的值截取2位
			}
		})

		console.log(...data1) //...表示返回每一个元素

效果 

2.对字段进行操作

	//返回的格式
		var data1 = data.value.map(res => {
			return {
				...res, //...使用es6语法,表示每一个对象,这里指的就是 {id: '00111322',name: 'zs01',age: 18}
				id: Number(res.id), //把字符串转换数字类型
				age: res.age + 1, //给每一个人加一岁
				name1: res.name.substring(0, 2), //把name的值截取2位,并且需要name1字段
				mark:res.id+res.name
			}
		})

		console.log(...data1) //...表示返回每一个元素

效果 

2.处理多层级的数据结构

后端的JSON格式:

//后端返回的数据格式
		var data = ref([{
			title: '一号楼',
			key: '100',
			children: [{
				title: '一单元',
				key: '110',
				children: [{
						title: '房间1',
						key: '111'
					},
					{
						title: '房间2',
						key: '112'
					}
				]
			}]
		}])

1.修改字段操作

		//把title和key,分别改成id和name,一一对应起来,返回的格式 ,使用递归的方式
		function formatData(data1) {
			data1.forEach(res => {
				res.id = res.key;
				res.name = res.title;
				delete res.key;
				delete res.title;
				if (res.children) {
					formatData(res.children)
				}
			})
		}
		formatData(data.value) //调用
		console.log(...data.value) //...表示返回每一个元素
		console.log(JSON.stringify(data.value)) //返回字符串

效果

2.修改字段的值操作

//在最后一个字段title中,把前面的数据加上
		function formatData(data1, text) {
			data1.forEach(res => {
				if (!res.children) {
					res.title = text + res.title
				}

				if (res.children) {
					text += res.title;
					formatData(res.children, text)
				}
			})
		}

		formatData(data.value, '') //调用
		console.log(...data.value) //...表示返回每一个元素
		console.log(JSON.stringify(data.value)) //返回字符串

效果

3.对JSON的字段进行排序 

后端JSON数据格式:

//后端返回的数据格式
		var data = ref([{
			title: '一号楼',
			key: '100',
			children: [{
				title: '一单元',
				key: '110',
				children: [{
						title: '房间1',
						key: '111'
					},
					{
						title: '房间2',
						key: '112'
					}
				]
			}]
		}, {
			title: '二号楼',
			key: '200',
			children: [{
				title: '二单元',
				key: '210',
				children: [{
						title: '房间1',
						key: '211'
					},
					{
						title: '房间2',
						key: '212'
					}
				]
			}]
		}])

根据key的值排序

	//根据根据key的值排序
		const compare = p => (m, n) => n[p] - m[p]; //简写排序,可以参考JavaScript中sort() 方法   
		//m[p] - n[p]升序    n[p] - m[p] 降序

		function formatData(data1, sortField) { //key:需要排序的字段
			data1.sort(compare(sortField));
			data1.forEach(res => {
				if (!res.children) {
					return;
				} else {
					formatData(res.children, sortField);
				}
			});
		}

		formatData(data.value, 'key') //调用,根据key的值排序
		console.log(...data.value) //...表示返回每一个元素
		console.log(JSON.stringify(data.value)) //返回字符串

效果,降序排列

4.实际案例

1.在使用uCharts时,经常需要进行数据转换

2.把res转成res1格式,因为res1是需要的

3.定义 res

	let res = ref(
		[{
				"name": "的方式是大多数",
				"value": 6
			},
			{
				"name": "yqwuwiyvui",
				"value": 3
			},
			{
				"name": "sdsfsdf",
				"value": 2
			},
			{
				"name": "wewerw",
				"value": 6
			}
		]
	)

4.定义res1和res1s,因为res1s是res1中series的值

	let res1 = ref({
		categories: [],
		series: []
	})
	let res1s = ref({
		name: "",
		data: []
	})

5.转换

		res.value.forEach((va) => {
			res1.value.categories.push(va.name)
			res1s.value.data.push(va.value)
		})
		res1s.value.name = "目标值"
		res1.value.series.push(res1s.value)
		chartData.value = res1.value

6.效果

上面的方式可以实现,没有问题,应该还有别的方式也行。

来源:vue3中前端处理不同数据结构的JSON_vue解析json-CSDN博客

  • 4
    点赞
  • 21
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

故里2130

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值