JSON to CSV using JavaScript

This is a way to convert a JSON object to a CSV file using only JavaScript.

We download the CSV file using the DOM method and allow the entires of results to have different number of headers. We assume that while each result object can have different number of headers the entry with the most number of headers contain all the possible headers in the results array.

A follow up feature enchancement to do with this program is to store the headers in a map so we can fully support as many headers as possible.

Sample JSON:

{ "results": [
    {
        "id": "8675309",
        ...
    }
] }

Code:

function convert() {
    var json = $("#_json").val();
    if(json == '')
        return;
    json = JSON.parse(json).results;
    // Find the largest element
    var largestEntry = 0;
    var header;
    for(var i=0; i<json.length; i++){
        if (!Object.keys) {
            Object.keys = function(obj) {
                var keys = [];
                for (var i in obj) {
                    if (obj.hasOwnProperty(i)) {
                        keys.push(i);
                    }
                }
                return keys;
            };
        }
        if(Object.keys(json[i]).length > largestEntry){
            largestEntry = Object.keys(json[i]).length;
            header = Object.keys(json[i]);
        }
    };
    // Assemble the header
    var convertedjson = "";
    if (typeof Array.prototype.forEach != 'function') {
        Array.prototype.forEach = function(callback){
          for (var i = 0; i < this.length; i++){
            callback.apply(this, [this[i], i, this]);
          }
        };
    }
    header.forEach(function(heading){
        if(convertedjson != "") {
            convertedjson += ",";
        }
        convertedjson += "\"";
        convertedjson += heading
        convertedjson += "\"";
    });
    convertedjson += "\r\n";
    // Iterate through the header for all elements
    json.forEach(function(entry){
        header.forEach(function(heading){
            convertedjson += "\"";
            convertedjson += (entry[heading] || "");
            convertedjson += "\"";
            convertedjson += ",";
        });
        convertedjson = convertedjson.substring(0, convertedjson.length - 1);
        convertedjson += "\r\n";
    });
    $("#_csv").val(convertedjson);
}

function convertAndExport() {
    convert();
    var csv = $("#_csv").val();
    if(csv == '')
        return;
    // Exporting
    var months = new Array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December");               
    var now = new Date();
    var date = now.getDate();
    var year = now.getFullYear();
    var month = months[now.getMonth()];
    var fileName = "CSV"+year+month+date;
    var uri = 'data:text/csv;charset=utf-8,' + escape(csv);         
    var link = document.createElement("a"); 
    $(link).hide();
    link.href = uri;
    link.download = fileName + ".csv";
    $("body").append(link);
    link.click();
    $("body").remove(link);
}
 
208
Kudos
 
208
Kudos

Now read this

URL Encoding

Building for the web (in any language) inevitably forces you to work with URIs or a compact sequence of characters that identifies an abstract or physical resource. Or maybe each web interfacing developer works with URLs? What’s the... Continue →