需求是表格中需要渲染数据
//后端返回数据格式
data:[
ML70: {jan_tss: 29, feb_tss: 28},
ML80: {jan_tss: 30, feb_tss: 29},
ML90: {jan_tss: 29, feb_tss: 28}
]
//前端想展示的数据格式
[
{division: 'ML70',jan_tss: 29, feb_tss: 28 },
{division: 'ML80',jan_tss: 30, feb_tss: 29 },
{division: 'ML90',jan_tss: 29, feb_tss: 28 }
]
以上内容后端返回的数据:将前端一个栏位的Value值变成了Key值,而对应后边的Value值包含所要展示的数据,现在数据中的Key值也需要展示到对应的表格中(即ML70,ML80,ML90)中
图示更清晰
实现思路:
1.先将每条数据的Key变成Value
2.然后再将改变后的数据塞进之前每条数据的Value({jan_tss: 29, feb_tss: 28})中去
这里先使用Object.entries()方法:Object.entries()方法返回一个给定对象自身可枚举属性的键值对数组,其排列与使用 for…in 循环遍历该对象时返回的顺序一致(区别在于 for-in 循环还会枚举原型链中的属性)
结果返回给定对象自身可枚举属性的键值对数组(数组)
Demo:
const obj = { foo: 'bar', baz: 42 };
console.log(Object.entries(obj)); // [ ['foo', 'bar'], ['baz', 42] ]
具体参考:官方网址
实现过程代码展示:
const data1 = Object.entries(data) //转换为对应的数组
console.log(data1);
/* 输出格式为数组:
[
0:[
0:"ML70"
1:{jan_tss: 29, feb_tss: 28}
]
1:[
0:"ML80"
1:{jan_tss: 29, feb_tss: 28}
]
2:[
0:"ML90"
1:{jan_tss: 29, feb_tss: 28}
]
]**/
const AcctualData = data1.map((item: any) => ({
...item[1], //此处详细请见Es6扩展运算符和rest运算符的用法
division: item[0] //实现将转换后的每条第一笔数据(0:"ML70",0:"ML80",0:"ML90")放到后边的{jan_tss: 29, feb_tss: 28}中
}))
console.log(AcctualData);
/* 输出
[
{division: 'ML70',jan_tss: 29, feb_tss: 28 },
{division: 'ML80',jan_tss: 30, feb_tss: 29 },
{division: 'ML90',jan_tss: 29, feb_tss: 28 }
]
**/
方法总结:
Object.entries()
Map()
Rest运算符