首页 > 代码库 > 数据行转列的应用（json数据源）
数据行转列的应用（json数据源）
开发项目时有时会遇到将数据的行列进行转换。今天逛园子是看到一个很不错的方法。不需要在数据库中对数据进行行列转换，将数据集合转换长json格式使用如下代码即可。
<script> $(document).ready(function () { var jsonData =http://www.mamicode.com/ [ { time: ‘2014-07-08‘, name: ‘电费‘, value: 120 }, { time: ‘2014-07-09‘, name: ‘电费‘, value: 66 }, { time: ‘2014-07-10‘, name: ‘电费‘, value: 88 }, { time: ‘2014-07-11‘, name: ‘电费‘, value: 99 }, { time: ‘2014-07-08‘, name: ‘水费‘, value: 120 }, { time: ‘2014-07-09‘, name: ‘水费‘, value: 66 }, { time: ‘2014-07-10‘, name: ‘水费‘, value: 88 }, { time: ‘2014-07-11‘, name: ‘水费‘, value: 99 }, { time: ‘2014-07-12‘, name: ‘水费‘, value: 75 } ]; var colField = ‘value‘, valueField = ‘name‘, idField = ‘time‘; var resultData = http://www.mamicode.com/row2col(jsonData, idField, colField, valueField, 0); alert(resultData.length); for (var i = 0; i < resultData.length; i++) { var tr = $("<tr></tr>"); var td1 = $("<td></td>"); var td2 = $("<td></td>"); var td3 = $("<td></td>"); td1.html(resultData[i][‘time‘]); td2.html(resultData[i][‘电费‘]); td3.html(resultData[i][‘水费‘]); tr.append(td1).append(td2).append(td3); tr.appendTo($("#aaa")); } }); /* 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; }</script>
记得引入JQ文件。（原文地址）
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。