element ui table组件组装数据结构
引言
生成一个表格
在table组件中，需要的数据是这样的
而且后端给我们的数据是这样的
案例一
需求一
如果我们想要将数据渲染成下面的这个样子，那么数据应该如何进行组装呢？
后端返回的数据如下：其中xdata是表格的头部，ydata1和ydata2和ydata3都是表格的数据
{
"ydata2": [
"HT1",
"B相温度",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0"
],
"ydata1": [
"HT1",
"A相温度",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0"
],
"ydata3": [
"HT1",
"C相温度",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0"
],
"xdata": [
"deviceName",
"remoteTestName",
"0时",
"1时",
"2时",
"3时",
"4时",
"5时",
"6时",
"7时",
"8时",
"9时",
"10时",
"11时",
"12时",
"13时",
"14时",
"15时",
"16时",
"17时",
"18时",
"19时",
"20时",
"21时",
"22时",
"23时"
]
}
需求一解决方案
格式化方法如下：
let newarr = [];
for (var i in myobj2) {
let obj1 = {};
myobj[i].forEach((item1, index1) => {
myobj.xdata.forEach((item2, index1) => {
obj1[item2] = myobj[i][index1];
});
});
newarr.push(obj1);
}
其中myobj2是去掉表头剩下的数据也就是去掉xdata字段剩下的数据，myobj是去掉xdata之前的数据，也就是上面的我粘贴的一大坨json数据，详情见目录详细代码-表一
最终数据变为这个样子：
详细代码-表一
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<script>
let result = [
{
deviceName: "HT1",
remoteTestName: "A相温度",
"0时": "25",
"1时": "26",
"2时": "28",
},
];
let myobj = {
ydata2: [
"HT1",
"B相温度",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
],
ydata1: [
"HT1",
"A相温度",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
],
ydata3: [
"HT1",
"C相温度",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
],
xdata: [
"deviceName",
"remoteTestName",
"0时",
"1时",
"2时",
"3时",
"4时",
"5时",
"6时",
"7时",
"8时",
"9时",
"10时",
"11时",
"12时",
"13时",
"14时",
"15时",
"16时",
"17时",
"18时",
"19时",
"20时",
"21时",
"22时",
"23时",
],
};
let myobj2 = {
ydata2: [
"HT1",
"B相温度",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
],
ydata1: [
"HT1",
"A相温度",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
],
ydata3: [
"HT1",
"C相温度",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
],
};
let newarr = [];
console.log(myobj);
for (var i in myobj2) {
let obj1 = {};
myobj[i].forEach((item1, index1) => {
myobj.xdata.forEach((item2, index1) => {
obj1[item2] = myobj[i][index1];
});
});
newarr.push(obj1);
}
console.log(newarr);
</script>
</body>
</html>
案例二
需求二
还是使用上面的数据，生成这一种表格：
（其实就是x轴和y轴对调了一下）
需求二解决方案
let newarr = [];
myobj.ydata2.forEach((item1, index1) => {
let newobj = {};
for (let item0 in myobj) {
myobj.xdata.forEach((item2, index2) => {
newobj[item0] = myobj[item0][index1];
});
}
newarr.push(newobj);
});
myobj就是后端返回来的所有的数据，详情见目录详细代码-表二
如果还有不明白的，我直接吧整个html文件粘贴过来：
详细代码-表二
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<script>
// reslute是最终要生成的数据的样子
let reslute = [
{
time: "0时",
ydata1: 1,
ydata2: 1,
ydata3: 1,
},
{
time: "1时",
ydata1: 2,
ydata2: 2,
ydata3: 2,
},
];
let myobj = {
ydata2: [
0, 0, 0, 0, 0, 0, 312, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0,
],
ydata1: [
0, 0, 0, 0, 132, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0,
],
ydata3: [
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 123, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0,
],
xdata: [
"0时",
"1时",
"2时",
"3时",
"4时",
"5时",
"6时",
"7时",
"8时",
"9时",
"10时",
"11时",
"12时",
"13时",
"14时",
"15时",
"16时",
"17时",
"18时",
"19时",
"20时",
"21时",
"22时",
"23时",
],
};
let newarr = [];
myobj.ydata2.forEach((item1, index1) => {
let newobj = {};
for (let item0 in myobj) {
myobj.xdata.forEach((item2, index2) => {
newobj[item0] = myobj[item0][index1];
});
}
newarr.push(newobj);
});
console.log(newarr);
</script>
</body>
</html>