index.html

<style>
#jsonArea{
	width:100%;
	height:100px;
}

#jsonURL {
	width:100%;
}
table{
	border-collapse : collapse;
}
</style>
<h2>JSON To Table</h2>
<textArea id="jsonArea" placeholder="Enter Valid JSON here..."></textArea>
<input type="text" id="jsonURL" placeholder="Enter Valid JSON URL here..." hidden="true"/>
<br/>
<button onclick="parse()">
Create Table
</button>
<button id="download" hidden="true">
Download
</button>
<br/>
<br/>
<table id="jsonTable" style="border : 1px"/>
<script>

function parse(){
	var jsonArea = document.getElementById('jsonArea').value;
	var jsonURL = document.getElementById('jsonURL').value;
	var table = document.getElementById('jsonTable');
	var download = document.getElementById("download");
	download.hidden= true;
	table.innerHTML = "";
	
	if((jsonArea != undefined && jsonArea != null && jsonArea.trim() != "") && (jsonURL != undefined && jsonURL != null && jsonURL.trim() != "")){
		alert('Please provide either JSON OR URL as input.');
	}
	else if(jsonArea != undefined && jsonArea != null && jsonArea.trim() != ""){
		formTable(jsonArea);
	}
	else if(jsonURL != undefined && jsonURL != null && jsonURL.trim() != ""){
		fetch(jsonURL)
		.then(json => {
			formTable(json);
		}).catch(error=>{
			alert('Error while fetch from URL : '+error);
		});
	}else{
		alert('Please provide either JSON OR URL as input.');
	}
}

function isValidJson(json){
  console.log(json);
	return true;
}

function formTable(json){
	if(!isValidJson(json)){
		alert('No Valid Json found.');
		return;
	}
	var table = document.getElementById('jsonTable');
	var jsonStr = JSON.parse(json);
	var setHeaders = true;
	for(i in jsonStr){
		var item = JSON.stringify(jsonStr[i]);
	  if(setHeaders){
			createEntry(table, item, true);
			setHeaders = false;
		}
		createEntry(table,item, false);
	}
	
	formatTable(table);
	var download = document.getElementById("download");
	download.hidden= false;
}


function createEntry(table,item,isHeader){
		var tr = document.createElement("tr");
		var json = JSON.parse(item);
		for(i in json){
		console.log(i);
			var td = document.createElement("td");
			if(isHeader){
				var bold = document.createElement('b');
				var textnode = document.createTextNode(i);       
				bold.appendChild(textnode);
				td.appendChild(bold);
			}else{
				var textnode = document.createTextNode(json[i]);    
				td.appendChild(textnode);
			}
			formatTable(td);
			tr.appendChild(td);
		}
		table.appendChild(tr);
}

function formatTable(item){
	item.style.border = '1px Solid black';
}

function download_csv(csv, filename) {
    var csvFile;
    var downloadLink;

    // CSV FILE
    csvFile = new Blob([csv], {type: "text/csv"});

    // Download link
    downloadLink = document.createElement("a");

    // File name
    downloadLink.download = filename;

    // We have to create a link to the file
    downloadLink.href = window.URL.createObjectURL(csvFile);

    // Make sure that the link is not displayed
    downloadLink.style.display = "none";

    // Add the link to your DOM
    document.body.appendChild(downloadLink);

    // Lanzamos
    downloadLink.click();
}

function export_table_to_csv(html, filename) {
	var csv = [];
	var rows = document.querySelectorAll("table tr");
	
    for (var i = 0; i < rows.length; i++) {
		var row = [], cols = rows[i].querySelectorAll("td, th");
		
        for (var j = 0; j < cols.length; j++) 
            row.push(cols[j].innerText);
        
		csv.push(row.join(","));		
	}

    // Download CSV
    download_csv(csv.join("\n"), filename);
}

document.getElementById("download").addEventListener("click", function () {
    var html = document.querySelector("table").outerHTML;
	export_table_to_csv(html, "table.csv");
});

</script>