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

ES6 Array.prototype.fill

So recently I tried to initialize an array of empty objects in javascript. I wanted it to be configurable with how many elements are present in the initial array as well as what I initialize it with (it may not be an empty object in the... Continue →