zoukankan      html  css  js  c++  java
  • 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中了。

  • 相关阅读:
    MySQL中默认值中用时间函数的问题
    mysql数据表的操作
    mysql数据库的基本操作
    mysql数据库的几个基本概念
    【转载】CentOS6.5_X64下安装配置MongoDB数据库
    Swap Swap,即交换分区
    linux中给PHP安装mongodb的扩展
    centos yum 安装 mongodb 以及php扩展
    设计模式主要分三个类型:创建型、结构型和行为型
    MySQL DELETE语句和TRUNCATE TABLE语句的区别
  • 原文地址:https://www.cnblogs.com/wjbych/p/13752957.html
Copyright © 2011-2022 走看看