Convert JSON to CSV using jQuery
HTML
<span>JSON:</span>
<pre id="json"></pre>
<input type="button" id="btnConvert" value="Convert To CSV" />
CSS
body {
font-family: calibri;
}
span {
font-weight: bold;
margin-bottom: 5px;
font-size: 18px;
text-decoration: underline;
color: blue;
}
pre {
font-size: 14px;
}
JavaScript
var jData = '[{"fname":"Mark", "lname":"Wood", "company":"Apple"},' +
'{"fname":"Steve", "lname":"Jones", "company":"Amazon"},' +
'{"fname":"Bill", "lname":"Peterson", "company":"HP"},' +
'{"fname":"Peter", "lname":"Jacobs", "company":"Dell"}]';
var seperator = ',';
$('#json').html(jData);
$('#btnConvert').click(function() {
ConvertToCSV(jData, "Employee Data", true, "EmployeeReport", seperator)
});
function ConvertToCSV(jData, title, ShowHeader, fileName, delimiter) {
var arrJSON = typeof jData != 'object' ? JSON.parse(jData) : jData;
var strCSV = '';
//Set title first.
if (title.length > 0)
strCSV += title + '\r\n\n';
if (ShowHeader) {
var headerRow = "";
for (var index in arrJSON[0]) {
if (headerRow != '') headerRow += delimiter;
headerRow += index;
}
strCSV += headerRow + '\r\n';
}
for (var i = 0; i < arrJSON.length; i++) {
var sLine = '';
for (var index in arrJSON[i]) {
if (sLine != '') sLine += delimiter;
sLine += arrJSON[i][index];
}
strCSV += sLine + '\r\n';
}
if (strCSV == '') {
console.log('Error while converting due to invalid data');
return;
}
var uri = 'data:text/csv;charset=utf-8,' + escape(strCSV);
var link = document.createElement("a");
link.href = uri;
link.style = "visibility:hidden";
link.download = fileName + ".csv";
$('body').append(link);
link.click();
$('body').remove(link);
}