Sometimes, the JSON data format returned by the backend is a format type that the frontend does not need. At this time, you can either let the backend modify it, and ask the backend big brother to return you what format you want. But sometimes unsatisfactory, the big brother at the back end asks you to switch by yourself, and at this time it is left to the front end, and you can only handle it yourself at the front end.
Table of contents
1. Operate on field values/fields of backend data
2. Handle multi-level data structures
1. Operate on field values/fields of backend data
The JSON format of the backend:
//后端返回的数据格式
var data = ref([{
id: '00111322',
name: 'zs01',
age: 18
},
{
id: '00035565644',
name: 'ls02',
age: 20
}
])1. Change the value of the field
//返回的格式
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) //...表示返回每一个元素Effect
2. Operate on fields
//返回的格式
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) //...表示返回每一个元素Effect
2. Handle multi-level data structures
The JSON format of the backend:
//后端返回的数据格式
var data = ref([{
title: '一号楼',
key: '100',
children: [{
title: '一单元',
key: '110',
children: [{
title: '房间1',
key: '111'
},
{
title: '房间2',
key: '112'
}
]
}]
}])1. Modify field operation
//把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)) //返回字符串Effect
2. Modify the value operation of the field
//在最后一个字段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)) //返回字符串Effect
3. Sort the fields of JSON
Backend JSON data format:
//后端返回的数据格式
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'
}
]
}]
}])Sort by key value
//根据根据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)) //返回字符串effects, sorted in descending order
4. Actual case
1. When using uCharts, data conversion is often required
2. Convert res to res1 format, because res1 is needed
3. Define res
let res = ref(
[{
"name": "的方式是大多数",
"value": 6
},
{
"name": "yqwuwiyvui",
"value": 3
},
{
"name": "sdsfsdf",
"value": 2
},
{
"name": "wewerw",
"value": 6
}
]
)4. Define res1 and res1s, because res1s is the value of series in res1
let res1 = ref({
categories: [],
series: []
})
let res1s = ref({
name: "",
data: []
})5. Conversion
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.value6. Effect
The above method can be realized without any problem, there should be other ways as well.