脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-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-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;
}
觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ js脚本，巧夺天工，精雕玉琢。小宝典献丑了！
以上是脚本宝典为你收集整理的javascript代码实例教程-JSON数据行转列的应用全部内容，希望文章能够帮你解决javascript代码实例教程-JSON数据行转列的应用所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。