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

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

目录

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

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

3.对JSON的字段进行排序 

4.实际案例

---

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

后端的JSON格式：

1. //后端返回的数据格式
2. var data = ref([{
3. id: '00111322',
4. name: 'zs01',
5. age: 18
6. },
7. {
8. id: '00035565644',
9. name: 'ls02',
10. age: 20
11. }
12. ])

1.对字段的值进行更改

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

效果 

2.对字段进行操作

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

效果 

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

后端的JSON格式：

1. //后端返回的数据格式
2. var data = ref([{
3. title: '一号楼',
4. key: '100',
5. children: [{
6. title: '一单元',
7. key: '110',
8. children: [{
9. title: '房间1',
10. key: '111'
11. },
12. {
13. title: '房间2',
14. key: '112'
15. }
16. ]
17. }]
18. }])

1.修改字段操作

1. //把title和key，分别改成id和name，一一对应起来,返回的格式 ,使用递归的方式
2. function formatData(data1) {
3. data1.forEach(res => {
4. res.id = res.key;
5. res.name = res.title;
6. delete res.key;
7. delete res.title;
8. if (res.children) {
9. formatData(res.children)
10. }
11. })
12. }
13. formatData(data.value) //调用
14. console.log(...data.value) //...表示返回每一个元素
15. console.log(JSON.stringify(data.value)) //返回字符串

效果

2.修改字段的值操作

1. //在最后一个字段title中，把前面的数据加上
2. function formatData(data1, text) {
3. data1.forEach(res => {
4. if (!res.children) {
5. res.title = text + res.title
6. }
8. if (res.children) {
9. text += res.title;
10. formatData(res.children, text)
11. }
12. })
13. }
15. formatData(data.value, '') //调用
16. console.log(...data.value) //...表示返回每一个元素
17. console.log(JSON.stringify(data.value)) //返回字符串

效果

3.对JSON的字段进行排序 

后端JSON数据格式：

1. //后端返回的数据格式
2. var data = ref([{
3. title: '一号楼',
4. key: '100',
5. children: [{
6. title: '一单元',
7. key: '110',
8. children: [{
9. title: '房间1',
10. key: '111'
11. },
12. {
13. title: '房间2',
14. key: '112'
15. }
16. ]
17. }]
18. }, {
19. title: '二号楼',
20. key: '200',
21. children: [{
22. title: '二单元',
23. key: '210',
24. children: [{
25. title: '房间1',
26. key: '211'
27. },
28. {
29. title: '房间2',
30. key: '212'
31. }
32. ]
33. }]
34. }])

根据key的值排序

1. //根据根据key的值排序
2. const compare = p => (m, n) => n[p] - m[p]; //简写排序，可以参考JavaScript中sort() 方法
3. //m[p] - n[p]升序 n[p] - m[p] 降序
5. function formatData(data1, sortField) { //key:需要排序的字段
6. data1.sort(compare(sortField));
7. data1.forEach(res => {
8. if (!res.children) {
9. return;
10. } else {
11. formatData(res.children, sortField);
12. }
13. });
14. }
16. formatData(data.value, 'key') //调用，根据key的值排序
17. console.log(...data.value) //...表示返回每一个元素
18. console.log(JSON.stringify(data.value)) //返回字符串

效果，降序排列

4.实际案例

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

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

3.定义 res

1. let res = ref(
2. [{
3. "name": "的方式是大多数",
4. "value": 6
5. },
6. {
7. "name": "yqwuwiyvui",
8. "value": 3
9. },
10. {
11. "name": "sdsfsdf",
12. "value": 2
13. },
14. {
15. "name": "wewerw",
16. "value": 6
17. }
18. ]
19. )

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

1. let res1 = ref({
2. categories: [],
3. series: []
4. })
5. let res1s = ref({
6. name: "",
7. data: []
8. })

5.转换

1. res.value.forEach((va) => {
2. res1.value.categories.push(va.name)
3. res1s.value.data.push(va.value)
4. })
5. res1s.value.name = "目标值"
6. res1.value.series.push(res1s.value)
7. chartData.value = res1.value

6.效果

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

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