vue3中處理不同數(shù)據(jù)結(jié)構(gòu)JSON的實(shí)現(xiàn)

更新時(shí)間：2023年06月19日 11:13:58 作者：故里2130

本文主要介紹了vue3中處理不同數(shù)據(jù)結(jié)構(gòu)JSON的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

有時(shí)候，后端返回的JSON數(shù)據(jù)格式，是前端不需要的格式類(lèi)型，這時(shí)，要么讓后端修改，你要什么格式，那么讓后端大哥哥給你返回什么格式。但是有時(shí)候不盡人意，后端大哥哥讓你自己轉(zhuǎn)換，此時(shí)就甩給前端了，只能在前端自己處理了。

1.對(duì)后端數(shù)據(jù)的字段值/字段進(jìn)行操作

后端的JSON格式：

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

1.對(duì)字段的值進(jìn)行更改

//返回的格式
		var data1 = data.value.map(res => {
			return {
				...res, //...使用es6語(yǔ)法，表示每一個(gè)對(duì)象，這里指的就是 {id: '00111322',name: 'zs01',age: 18}
				id: Number(res.id), //把字符串轉(zhuǎn)換數(shù)字類(lèi)型
				age: res.age + 1, //給每一個(gè)人加一歲
				name: res.name.substring(0, 2) //把name的值截取2位
			}
		})
		console.log(...data1) //...表示返回每一個(gè)元素

效果

2.對(duì)字段進(jìn)行操作

//返回的格式
		var data1 = data.value.map(res => {
			return {
				...res, //...使用es6語(yǔ)法，表示每一個(gè)對(duì)象，這里指的就是 {id: '00111322',name: 'zs01',age: 18}
				id: Number(res.id), //把字符串轉(zhuǎn)換數(shù)字類(lèi)型
				age: res.age + 1, //給每一個(gè)人加一歲
				name1: res.name.substring(0, 2), //把name的值截取2位，并且需要name1字段
				mark:res.id+res.name
			}
		})
		console.log(...data1) //...表示返回每一個(gè)元素

效果

2.處理多層級(jí)的數(shù)據(jù)結(jié)構(gòu)

后端的JSON格式：

//后端返回的數(shù)據(jù)格式
		var data = ref([{
			title: '一號(hào)樓',
			key: '100',
			children: [{
				title: '一單元',
				key: '110',
				children: [{
						title: '房間1',
						key: '111'
					},
					{
						title: '房間2',
						key: '112'
					}
				]
			}]
		}])

1.修改字段操作

//把title和key，分別改成id和name，一一對(duì)應(yīng)起來(lái),返回的格式 ,使用遞歸的方式
		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) //調(diào)用
		console.log(...data.value) //...表示返回每一個(gè)元素
		console.log(JSON.stringify(data.value)) //返回字符串

效果

2.修改字段的值操作

//在最后一個(gè)字段title中，把前面的數(shù)據(jù)加上
		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, '') //調(diào)用
		console.log(...data.value) //...表示返回每一個(gè)元素
		console.log(JSON.stringify(data.value)) //返回字符串

效果

3.對(duì)JSON的字段進(jìn)行排序

后端JSON數(shù)據(jù)格式：

//后端返回的數(shù)據(jù)格式
		var data = ref([{
			title: '一號(hào)樓',
			key: '100',
			children: [{
				title: '一單元',
				key: '110',
				children: [{
						title: '房間1',
						key: '111'
					},
					{
						title: '房間2',
						key: '112'
					}
				]
			}]
		}, {
			title: '二號(hào)樓',
			key: '200',
			children: [{
				title: '二單元',
				key: '210',
				children: [{
						title: '房間1',
						key: '211'
					},
					{
						title: '房間2',
						key: '212'
					}
				]
			}]
		}])

根據(jù)key的值排序

//根據(jù)根據(jù)key的值排序
		const compare = p => (m, n) => n[p] - m[p]; //簡(jiǎn)寫(xiě)排序，可以參考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') //調(diào)用，根據(jù)key的值排序
		console.log(...data.value) //...表示返回每一個(gè)元素
		console.log(JSON.stringify(data.value)) //返回字符串

效果，降序排列

4.實(shí)際案例

1.在使用uCharts時(shí)，經(jīng)常需要進(jìn)行數(shù)據(jù)轉(zhuǎn)換

2.把res轉(zhuǎn)成res1格式，因?yàn)閞es1是需要的

3.定義 res

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

4.定義res1和res1s，因?yàn)閞es1s是res1中series的值

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

5.轉(zhuǎn)換

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

6.效果

上面的方式可以實(shí)現(xiàn)，沒(méi)有問(wèn)題，應(yīng)該還有別的方式也行。

到此這篇關(guān)于vue3中處理不同數(shù)據(jù)結(jié)構(gòu)JSON的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)vue3處理JSON內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: