JSFiddle - React, Tailwind, and code Playground

by gedave

HTML

<body>
    <p id="heading">JSON to CSV Converter</p>
    <p class="small"><a href="http://jsfiddle.net/sturtevant/AZFvQ/" target="_blank">CSV to JSON Converter</a>
    <hr />
    <p>Paste Your JSON Here:</p>
    <textarea id="json" class="text">[{"Id":1, "Email": "", "UserName":"Sam Smith"},
{"Id":2,"Email": "[email protected]", "UserName":"Fred Frankly"},
{"Id":1, "UserName":"Zachary Zupers"}]</textarea>
    <br />
    <input id="quote" type="checkbox" checked="true" /> Wrap values in double quotes
    <br />
    <input id="labels" type="checkbox" checked="true" /> Include labels in first row
    <br />
    <button id="convert">Convert to CSV</button>
    &nbsp;&nbsp;
    <button id="download">Download CSV</button>
    <textarea id="csv" class="text"></textarea>
    <p>Based on code posted <a href="http://stackoverflow.com/a/4130939/317" target="_blank">here on StackOverflow</a></p>

CSS

#heading { font-size: x-large; font-weight: bold; }
.text { width: 99%; height: 200px; }
.small { font-size: small; }

JavaScript

function JSON2CSV(objArray) {
    var array = typeof objArray != 'object' ? JSON.parse(objArray) : objArray;

    var line = '';
    var result = '';
    var columns = [];

    var head = array[0];
    if ($("#quote").is(':checked')) {
        var i = 0;
        for (var key in array[0]) {
            var keyString = key + "";
            keyString = '"' + keyString.replace(/"/g, '""') + '",';
            columns[i] = key;
            line += keyString;
            i++;
        }
    } else {
        var i = 0;
        for (var key in array[0]) {
            keyString = key + ',';
            columns[i] = key;
            line += keyString;
            i++;
        }
    }

    if ($("#labels").is(':checked')) {
        line = line.slice(0, -1);
        result += line + '\r\n';
    }


    for (var i = 0; i < array.length; i++) {
        var line = '';

        if ($("#quote").is(':checked')) {

            for ( var j = 0; j < columns.length; j++) {
                var value = array[i][columns[j]] ? array[i][columns[j]] : '';
                var valueString = value + "";
                line += '"' + valueString.replace(/"/g, '""') + '",';
            }
        } else {
            for ( var j = 0; j < columns.length; j++) {
                var value = array[i][columns[j]] ? array[i][columns[j]] : '';
                var valueString = value + ',';
                line += valueString;
            }
        }

        line = line.slice(0, -1);
        result += line + '\r\n';
    }
    return result;
    
}
        
$("#convert").click(function() {
    var json = $.parseJSON($("#json").val());
    var csv = JSON2CSV(json);
    $("#csv").val(csv);
});
    
$("#download").click(function() {
    var json = $.parseJSON($("#json").val());
    var csv = JSON2CSV(json);
    window.open("data:text/csv;charset=utf-8," + escape(csv))
});