首页 > 代码库 > JSON数据行转列的应用

JSON数据行转列的应用

背景

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

时间  类别  费用
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-0812023
2014-07-08     44  77
2014-07-094566
2014-07-094377
2014-07-102145
2014-07-105421
2014-07-116534
2014-07-116527

 

 

 

 

 

 

 

  

  

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

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

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

实现

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

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

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

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

    /* json数据行列转换     * @jsonData json数据源     * @idField  条件字段     * @colField 生成列名的字段     * @valueField 生成值的字段     * @emptyValue 默认值 避免有些数据不全    */    function row2col(jsonData, idField, colField, valueField, emptyValue) {        var result = [], //存储返回的数据            idIndexData = http://www.mamicode.com/{},//存储id在数组中的信息(位置)            resultColumns = {},//存储列名数据            curRecord = null;//存储当前数据        var colFields = colField.split(,); //        // 循环整个JSON数组:[{...},{...},{...},...]          for (var idx = 0; idx < jsonData.length; idx++) {            //当前json数据对象            var cdata =http://www.mamicode.com/ jsonData[idx];            //根据主键值,查找到结果数组中的索引号            var idValue =http://www.mamicode.com/ 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 =http://www.mamicode.com/ 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;    }

  

完整示例下载