JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://rawgit.com/moappi/jquery.json2html/master/json2html.js"></script>
<script src="https://rawgit.com/moappi/jquery.json2html/master/jquery.json2html.js"></script>
<div id="json-parse">
</div>
JavaScript
function generateChartData() {
for (var i = 0; i < 5; i++) {
var file_id = Math.floor(Math.random() * 90000) + 10000,
file_name = 'Dummy File ' + Math.floor(Math.random() * 20) + 30 + '.zip',
file_clicks = Math.round(Math.random() * 480) + 820,
file_downloads = Math.round(Math.random() * 160) + 420,
file_conversion = (file_clicks / file_downloads).toFixed(2),
file_profit = Math.round(Math.random() * 120) + 310,
file_cpa = (file_profit / file_downloads).toFixed(2),
file_epc = (file_profit / file_clicks).toFixed(2);
chartData.push({
file_id: file_id,
file_name: file_name,
file_clicks: file_clicks,
file_downloads: file_downloads,
file_conversion: file_conversion,
file_cpa: file_cpa,
file_epc: file_epc,
file_profit: file_profit
});
}
// create variables but no values
var total_clicks = 0, total_downloads = 0, total_conversion = 0, total_profit, total_cpa, total_epc;
stats.total_clicks = total_clicks;
//...
}
// Create html template for further json parsing
var headertemplate = {
"tag": "thead",
"id": "json-head",
"children": [
{
"tag": "tr",
"children": [
{
"tag": "th",
"html": "ID"
},
{
"tag": "th",
"html": "File Name"
},
{
"tag": "th",
"html": "Clicks"
},
{
"tag": "th",
"html": "Downloads"
},
{
"tag": "th",
"html": "Conversion"
...