I created a helper a few months back that used DATA URIs to download JSON to CSV, but due to IE’s implementation of DATA URIs (or lack of), it does not work for IE (all versions). Here is the same helper that will just convert the data, which you can use anyway you want (example: in a popup, to display in a modal window, etc…).
<html>
<head>
<title>Demo - Covnert JSON to CSV</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="https://github.com/douglascrockford/JSON-js/raw/master/json2.js"></script>
<script type="text/javascript">
// JSON to CSV Converter
function ConvertToCSV(objArray) {
var array = typeof objArray != 'object' ? JSON.parse(objArray) : objArray;
var str = '';
for (var i = 0; i < array.length; i++) {
var line = '';
for (var index in array[i]) {
if (line != '') line += ','
line += array[i][index];
}
str += line + '\r\n';
}
return str;
}
// Example
$(document).ready(function () {
// Create Object
var items = [
{ name: "Item 1", color: "Green", size: "X-Large" },
{ name: "Item 2", color: "Green", size: "X-Large" },
{ name: "Item 3", color: "Green", size: "X-Large" }];
// Convert Object to JSON
var jsonObject = JSON.stringify(items);
// Display JSON
$('#json').text(jsonObject);
// Convert JSON to CSV & Display CSV
$('#csv').text(ConvertToCSV(jsonObject));
});
</script>
</head>
<body>
<h1>
JSON</h1>
<pre id="json"></pre>
<h1>
CSV</h1>
<pre id="csv"></pre>
</body>
</html>
Here is the output using the script and above.
JSON
Created with “JSON.stringify()” function from json.org.
[{"name":"Item 1","color":"Green","size":"X-Large"},{"name":"Item 2","color":"Green","size":"X-Large"},{"name":"Item 3","color":"Green","size":"X-Large"}]
CSV
Created with “ConvertToCSV()” function I created above.
Item 1,Green,X-Large Item 2,Green,X-Large Item 3,Green,X-Large
Nathan and I ran out for a few hours on Monday night to catch a few perch, and he ended up finding a few HUGE sandcrabs that would make perfect bait for Corbina and Spot Fin Croaker!!!
#1 by dip_melb on August 21, 2012 - 2:35 am
Quote
Instead of using hard coded JSONs, how do I pass a file name, say C:\test.json?
#2 by Zach on August 21, 2012 - 7:50 am
Quote
I only hard-coded the data as an example, if you want to pull data remotely most people normally use jQuery Ajax methods ( $.get(), $.ajax(), $.getJSON(), etc….). The are many other ways to do load data remotely, just pick something your comfortable with and use it.
Here is a link showing how to use a bunch of jQuery AJAX Methods
#3 by shashi on August 8, 2012 - 10:26 pm
Quote
Is there a quick way to include the header in the first row without manually parsing json string?
#4 by Zach on August 9, 2012 - 7:47 am
Quote
Lots of ways to do it, I’d probably go with tweaking the method to add an optional parameter where you can pass in your own header array. This way, you can pass in custom column headers anytime your exporting to CSV.
#5 by Greg on June 6, 2012 - 9:27 am
Quote
Im trying to figure out how to use this, an it is not clear. How do I convert my certified.json to csv?
#6 by Zach on June 6, 2012 - 9:49 am
Quote
If you c/p the code above into a HTML file it’s 100% working, and is probably the best place to start in learning how this code is used. Your statement is vague and tells nothing about what you’ve tried or the errors you’ve encountered. If you need help, setup a demo of your problem in jsFiddle and post me a copy of your link and I’ll take a look at your problem.
#7 by Yiannis on January 14, 2012 - 10:45 am
Quote
HEllo
could you please give me detailed instructions how to use this code ?
thanx
#8 by Zach on January 3, 2012 - 12:57 pm
Quote
Ethan,
You call the URL using the normal jQuery getJSON() or ajax() method. Once you download the object, you then transform it on your page using the helper above. Here is the official jQuery documentation on how to call a service via ajax(): http://api.jquery.com/jQuery.ajax/
#9 by Ethan Pepper on January 2, 2012 - 2:59 pm
Quote
Yes, how would this work if instead of creating an object you were getting a JSON object froma URL. How do you call the URL and pass it?
#10 by Guus Beltman on August 9, 2011 - 3:50 am
Quote
Zach, thanks for sharing this nifty piece of jQuery. For CSV it is also common that the 1st line if mentioning the column names. You make it work when you insert this snippet just after ‘var str = ”;’ :
for (var colname in array[0]) {
if (str != ”) str += ‘,’
str += colname;
}
str += ‘\r\n’;
Kind regards,
Guus
#11 by Ilya on August 2, 2011 - 9:54 am
Quote
// Convert Oject to JSON
Missing “b” in Object
#12 by Zach on August 2, 2011 - 10:38 am
Quote
thanks, i’ll correct the typo…
#13 by Zach on June 21, 2011 - 5:44 pm
Quote
Dennis, thanks for pointing that out… Something weird must have happened with my copy and paste or my fast typing fingers. Fixed.
#14 by Dennis on June 21, 2011 - 5:32 pm
Quote
Super, thanks for posting! Two fixes though: 1. Need closing ] in items object; 2. should be closing pre tag