当前位置: 首页 > Web前端 > JSON > 正文

JSON数据行转列的应用

2018-04-24 来源:博客园/冲动

背景

先说说为什么要弄什么行转列。

时间   类别   费用
2014-07-08 电费 120
2014-07-08      水费   23
2014-07-09 电费 44
2014-07-09 水费 77
2014-07-10 电费 45
2014-07-10 水费 21
2014-07-11 电费 34
2014-07-11 水费 27

费劲的弄出表格,才发现,弄成了每天的水电费,不过是测试数据,不要在意这些细节。

很多时候我们就通过sql语句在数据库中查询到如上数据,那么展现到页面的时候,势必要变成下面一种格式

时间   电费   水费
2014-07-08 120 23
2014-07-08      44   77
2014-07-09 45 66
2014-07-09 43 77
2014-07-10 21 45
2014-07-10 54 21
2014-07-11 65 34
2014-07-11 65 27

那我们循环来生成table的html吧。

有些善于提问的朋友可能会问到,既然要这样显示,那么可以把电费和水费作为列存储在table中啊。这里不多讨论这个话题,因为中国的收费越来越多,物业费、保护费、税收、天然气等等各种名目......

因此才希望无论费用类别有多少种,都能把它自动转换成列名信息,以表格形式呈现在用户面前。

实现

实现起来很简单,指定主键字段,用来作为列名的字段,值字段,对应上面的实例依次为 "时间",“类别”,"费用"。

主要思路则是,遍历JSON,取到每一行的类别的值,作为列名存储。

这里增加了一个默认值,意在解决数据不完整的问题。

再次用下上面的实例,正确的做法是每天都会对水表和电表进行抄表计算费用,那么万一哪天没写怎么办,那转换后该结构不是不完整了吗,比如2014-07-09号只有电费,连水费这一行数据都没有,因此在转换成功后,特意检测了是否存在这样的情况,如果存在,则设置默认值。

    /* json数据行列转换
     * @jsonData json数据源
     * @idField  条件字段
     * @colField 生成列名的字段
     * @valueField 生成值的字段
     * @emptyValue 默认值 避免有些数据不全
    */
    function row2col(jsonData, idField, colField, valueField, emptyValue) {
        var result = [], //存储返回的数据
            idIndexData = {},//存储id在数组中的信息(位置)
            resultColumns = {},//存储列名数据
            curRecord = null;//存储当前数据
 
        var colFields = colField.split(','); //
 
        // 循环整个JSON数组:[{...},{...},{...},...]  
        for (var idx = 0; idx < jsonData.length; idx++) {
 
            //当前json数据对象
            var cdata = jsonData[idx];
 
            //根据主键值,查找到结果数组中的索引号
            var idValue = cdata[idField];
            var num = idIndexData[idValue];//获取存储该id的数组索引号
            if (num != null) {
                curRecord = result[num];
            } else {
                //初始化数据时保持完整的结构信息 避免因为缺乏数据,缺乏指定的列数据
                curRecord = {};
            }
 
            // 指定的colFields列下的数据作为y轴,则取出该列的数据作为y轴即可
            for (var i in colFields) {
                var key = colFields[i];
 
                //获取到colField的值,作为列名
                var value = cdata[valueField];
                curRecord[value] = cdata[key];
 
                //存储列名
                resultColumns[value] = null;
                break;
            }
 
            //除数据内容外,还需要添加主键数据  
            curRecord[idField] = idValue;
 
            //对象若为新建 则新增进数组
            if (num == null) {
                idIndexData[idValue] = result.push(curRecord) - 1;
            }
        }
 
        //数据检查 由于是将行数据作为列名,则可能会存在部分行缺少其他列数据,若缺少,则指定默认值
        for (var i in result) {
            for (var name in resultColumns) {
                if (!result[i].hasOwnProperty(name)) result[i][name] = emptyValue;
            }
        }
        return result;
    }

完整示例下载