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）用來獲取鍵名

返回對像中的數據

    computed:{
        dataText:function(){
            var mainData=[];
            for (var i=0;i<this.fenxiData.length;i++){
                var item=this.fenxiData[i];
                mainData.push(Object.values(item));
            }
            return mainData;
        },
    },

返回的結果如下

[ [ "15034100248", "BD20200915170817", 333, 83, 4, "XX1" ],
  [ "13903417124", "BD20200915170817", 301, 75, 4, "XX2" ] ]

 

返回對像中的鍵名

dataTitle:function(){
      var item=[];
      if(this.fenxiData.length>0){
            item=this.fenxiData[0];
      }
       return Object.keys(item);
},

返回的結果如下

[ "被評分人", "問卷ID", "總分", "均分", "計數", "name" ]

數據加工好以后，就可以用來綁定到Echarts中了。