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
#1 by boopalan on July 3, 2014 - 12:11 am
Its working fine for small number of objects data say 1000 with 10 key of each. If the number of objects exceeds 1000 or the key exceeds 10 the browser get hanged. Any solution for handling large sum of data say 10000 objects with more than 20 key in each of them?
#2 by Chris on May 26, 2014 - 11:41 am
Hello Zach, thank you for your code.
It works nicely but there is one problem. It doesn’t work with nested objects which therefore remain unconverted. For example, I have tweets in JSON format and I would like to apply your code to them since Tweets in JSON have several nested JSON objects.
How would you solve this?
#3 by ankitdubey on November 11, 2013 - 5:15 am
how to onvert nested json into csv? plz help me ……
#4 by dip_melb on August 21, 2012 - 2:35 am
Instead of using hard coded JSONs, how do I pass a file name, say C:\test.json?
#5 by Zach on August 21, 2012 - 7:50 am
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
#6 by shashi on August 8, 2012 - 10:26 pm
Is there a quick way to include the header in the first row without manually parsing json string?
#7 by Zach on August 9, 2012 - 7:47 am
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.
#8 by Greg on June 6, 2012 - 9:27 am
Im trying to figure out how to use this, an it is not clear. How do I convert my certified.json to csv?
#9 by Zach on June 6, 2012 - 9:49 am
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.
#10 by Yiannis on January 14, 2012 - 10:45 am
HEllo
could you please give me detailed instructions how to use this code ?
thanx
#11 by Zach on January 3, 2012 - 12:57 pm
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/
#12 by Ethan Pepper on January 2, 2012 - 2:59 pm
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?
#13 by Guus Beltman on August 9, 2011 - 3:50 am
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
#14 by Ilya on August 2, 2011 - 9:54 am
// Convert Oject to JSON
Missing “b” in Object
#15 by Zach on August 2, 2011 - 10:38 am
thanks, i’ll correct the typo…
#16 by Zach on June 21, 2011 - 5:44 pm
Dennis, thanks for pointing that out… Something weird must have happened with my copy and paste or my fast typing fingers. Fixed.
#17 by Dennis on June 21, 2011 - 5:32 pm
Super, thanks for posting! Two fixes though: 1. Need closing ] in items object; 2. should be closing pre tag