Page 1 of 1
JSON parsing sample
Posted: Sat Jun 07, 2014 8:23 pm
by Nikolay
- image.png (25.42 KiB) Viewed 2350 times
SQL
htt
Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="master.css" rel="stylesheet"></link>
<title>Andre's JSON Table</title>
</head>
<body onload="loadingBody()">
<p>JSON string <div id="myjson"></div></p>
<p>Table <div id="mytable"></div></p>
</body>
<script>
function loadingBody(){
var json =<TMPL_VAR JSONCONTENTS>;
document.getElementById('myjson').innerHTML=JSON.stringify(json);
if(json.length > 0){
displayData(json);
}
else{
document.getElementById('mytable').innerHTML='No records found!';
}
}
function createTableRowContent(rowObject, data, cellType){
var rowContent = document.createElement(cellType);
var cell = document.createTextNode(data);
rowContent.appendChild(cell);
rowObject.appendChild(rowContent);
}
function createTableData(rowObject, data){
createTableRowContent(rowObject, data, 'td');
}
function createTableHeader(rowObject, data){
createTableRowContent(rowObject, data, 'th');
}
function displayData(jsonData){
var table = document.createElement('table');
table.border = "1";
var thead = document.createElement('thead');
table.appendChild(thead);
var row = document.createElement('tr');
for(var prop in jsonData[0]){
createTableHeader(row, prop);
}
thead.appendChild(row);
var tbody = document.createElement('tbody');
table.appendChild(tbody);
for(var obj in jsonData){
var row = document.createElement('tr');
for(var prop in jsonData[obj]){
createTableData(row, jsonData[obj][prop]);
}
tbody.appendChild(row);
}
document.getElementById('mytable').innerHTML = '';
document.getElementById('mytable').appendChild(table);
}
</script>
</html>
Original article:
http://blog.andremakram.com/?p=7
Re: JSON parsing sample
Posted: Mon Jun 09, 2014 6:21 am
by Nikolay
Re: JSON parsing sample
Posted: Wed Jun 25, 2014 8:07 pm
by Nikolay
for Transaction Filter settings
Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="master.css" rel="stylesheet"></link>
<title>Andre's JSON Table</title>
</head>
<body onload="loadingBody()">
<div id="mytable"></div>
</body>
<script>
function loadingBody(){
var json =[{"ACCOUNT": "События"}, {"DATE": "2014-07-11"}];
if(json.length > 0){
displayData(json);
}
}
function createTableRowContent(rowObject, data, cellType){
var rowContent = document.createElement(cellType);
var cell = document.createTextNode(data);
rowContent.appendChild(cell);
rowObject.appendChild(rowContent);
}
function createTableData(rowObject, data){
createTableRowContent(rowObject, data, 'td');
}
function displayData(jsonData){
var table = document.createElement('table');
table.border = "1";
var tbody = document.createElement('tbody');
table.appendChild(tbody);
for(var obj in jsonData){
var row = document.createElement('tr');
for(var prop in jsonData[obj]){
createTableData(row, prop);
createTableData(row, jsonData[obj][prop]);
}
tbody.appendChild(row);
}
document.getElementById('mytable').innerHTML = '';
document.getElementById('mytable').appendChild(table);
}
</script>
</html>
Re: JSON parsing sample
Posted: Fri Aug 29, 2014 12:19 pm
by Nikolay
Universal template
Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Andre's JSON Table</title>
<link href = "master.css" rel = "stylesheet" />
<script src = "ChartNew.js"></script>
<script src="sorttable.js"></script>
</head>
<body onload="loadingBody()">
<p>JSON string <div id="myjson"></div></p>
<table class="table" id="mytable">
</table>
</body>
<script>
var json =<TMPL_VAR JSONCONTENTS>;
var _tbody_ = document.createElement('tbody'),
_thead_ = document.createElement('thead'),
_tr_ = document.createElement('tr'),
_th_ = document.createElement('th'),
_td_ = document.createElement('td');
// Builds the HTML Table out of myList json data from Ivy restful service.
function buildHtmlTable(arr) {
var tbody = _tbody_.cloneNode(false);
for (var i=0, maxi=arr.length; i < maxi; ++i) {
var tr = _tr_.cloneNode(false);
for (var key in arr[i]) {
if (arr[i].hasOwnProperty(key)) {
var td = _td_.cloneNode(false);
td.appendChild(document.createTextNode(arr[i][key] || ''));
}
tr.appendChild(td);
}
tbody.appendChild(tr);
}
return tbody;
}
function getColumnHeaders(arr)
{
var thead = _thead_.cloneNode(false);
var tr = _tr_.cloneNode(false);
for (var i=0, l=1; i < l; i++) {
for (var key in arr[i]) {
if (arr[i].hasOwnProperty(key)) {
var th = _th_.cloneNode(false);
th.appendChild(document.createTextNode(key));
tr.appendChild(th);
}
}
thead.appendChild(tr);
}
return thead;
}
//document.getElementById('myhead').innerHTML = '';
document.getElementById('mytable').appendChild(getColumnHeaders(json));
document.getElementById('mytable').appendChild(buildHtmlTable(json));
</script>
</html>