vue2.0中实现从对像到数组的转换
一、对像
从后台直接返回的数据，赋值给vue的变量，显示出来如下，它是对像
[ { "被评分人": "15034100248", "问卷ID": "BD20200915170817", "总分": 333, "均分": 83, "计数": 4, "name": "XX1" },
{ "被评分人": "13903417124", "问卷ID": "BD20200915170817", "总分": 301, "均分": 75, "计数": 4, "name": "XX2" } ]
在模版中可以通过v-for来方便的读取和使用。
二、数组
但是在js中进行计算时，用到的基本上都是数组，特别是需要绑定数据到ECharts图表上时，下面的就是数组。
[ [ "15034100248", "BD20200915170817", 333, 83, 4, "XX1" ], [ "13903417124", "BD20200915170817", 301, 75, 4, "XX2" ] ]
那么对像怎么转换成数组了，刚开始用for来读取一下吧，结果卡壳了，百度了一下ES6有新的方法来实现。
三、对像到数组的转换
1、Object.values（obj）用来获取值
2、Object.keys（obj）用来获取键名
返回对像中的数据
1 computed:{ 2 dataText:function(){ 3 var mainData=[]; 4 for (var i=0;i<this.fenxiData.length;i++){ 5 var item=this.fenxiData[i]; 6 mainData.push(Object.values(item)); 7 } 8 return mainData; 9 }, 10 },
返回的结果如下
[ [ "15034100248", "BD20200915170817", 333, 83, 4, "XX1" ],
[ "13903417124", "BD20200915170817", 301, 75, 4, "XX2" ] ]
返回对像中的键名
1 dataTitle:function(){ 2 var item=[]; 3 if(this.fenxiData.length>0){ 4 item=this.fenxiData[0]; 5 } 6 return Object.keys(item); 7 },
返回的结果如下
[ "被评分人", "问卷ID", "总分", "均分", "计数", "name" ]
数据加工好以后，就可以用来绑定到Echarts中了。
