这篇文章将为大家详细讲解有关JSON数据行转列的应用是怎样的，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。
成都创新互联公司主营庆安网站建设的网络公司,主营网站建设方案,App定制开发,庆安h5微信小程序搭建,庆安网站营销推广欢迎庆安等地区企业咨询
先说说为什么要弄什么行转列。
| 时间 | 类别 | 费用 |
| 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; }完整示例下载
关于JSON数据行转列的应用是怎样的就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。
