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

The argument for const

Lately as my team moves towards a mandatory ES6 development cycle, we often go into arguments about which keyword to use to declare a variable. As outlined in my previous blog, ES6 brings 2 new variable declaration keywords to... Continue →