JSON parsing sample

Build and share your cool customized reports built w/ one sql, Chart.js and Lua (https://github.com/moneymanagerex/general-reports)
Post Reply
Nikolay
MMEX Developer
Posts: 1344
Joined: Sat Dec 06, 2008 2:27 pm
Are you a spam bot?: No
Location: Sankt-Petersburg, Russia

JSON parsing sample

Post by Nikolay »

image.png
(25.42 KiB) Downloaded 1497 times
SQL

Code: Select all

 select * from assets_v1
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

Nikolay
MMEX Developer
Posts: 1344
Joined: Sat Dec 06, 2008 2:27 pm
Are you a spam bot?: No
Location: Sankt-Petersburg, Russia

Re: JSON parsing sample

Post by Nikolay »


Nikolay
MMEX Developer
Posts: 1344
Joined: Sat Dec 06, 2008 2:27 pm
Are you a spam bot?: No
Location: Sankt-Petersburg, Russia

Re: JSON parsing sample

Post 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>

Nikolay
MMEX Developer
Posts: 1344
Joined: Sat Dec 06, 2008 2:27 pm
Are you a spam bot?: No
Location: Sankt-Petersburg, Russia

Re: JSON parsing sample

Post 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>

Post Reply