...
HTML |
---|
<script type="text/javascript"> // based on an answer found at https://stackoverflow.com/questions/5180382/convert-json-data-to-a-html-table // Builds the HTML Table out of myList. function buildHtmlTable(selector, dataList) { AJS.$(selector).html(''); var columns = addAllColumnHeaders(dataList, selector); for (var i = 0; i < dataList.length; i++) { var row$ = AJS.$('<tr/>'); for (var colIndex = 0; colIndex < columns.length; colIndex++) { var cellValue = dataList[i][columns[colIndex]]; if (cellValue == null) cellValue = ""; row$.append(AJS.$('<td/>').html(cellValue)); } $(selector).append(row$); } } // Adds a header row to the table and returns the set of columns. // Need to do union of keys from all records as some records may not contain // all records. function addAllColumnHeaders(dataList, selector) { var columnSet = []; var headerTr$ = AJS.$('<tr/>'); for (var i = 0; i < dataList.length; i++) { var rowHash = dataList[i]; for (var key in rowHash) { if ($.inArray(key, columnSet) == -1) { columnSet.push(key); headerTr$.append(AJS.$('<th/>').html(key)); } } } $(selector).append(headerTr$); return columnSet; } function findProp(obj, prop, defval){ if (typeof defval == 'undefined') defval = null; prop = prop.split('.'); for (var i = 0; i < prop.length; i++) { if(typeof obj[prop[i]] == 'undefined') return defval; obj = obj[prop[i]]; } return obj; } function transformData(dataArray, transformTemplate) { var transformed = []; for (var i = 0; i < dataArray.length; i++) { var dataRow = dataArray[i]; var transformedRow = {}; for (var j = 0; j < transformTemplate.length; j++) { var propValue = findProp(dataRow, transformTemplate[j].prop); transformedRow[transformTemplate[j].name] = propValue; if (dataRow['renderer'] != null) { var propValues = JSON.parse(propValue); var values = ''; for (var k = 0; k < propValues.length; k++) { var val = findProp(propValues[k], dataRow['renderer']); if (val != null) { if (values != '') { values = values + ', '; } values = values + val; } } } } transformed.push(transformedRow); } return transformed; } </script> |
...