csv to json using jquery

In this post, we study about the csv format to json format using jquery. First html design for get csv format and button for download or convert json converter.When user on click jquery function has been call. When user on json converter click then display json response and click on download json then json response display on the new tab and you can save it. The html code are given below:

   <p id="heading">CSV to JSON formate Converter</p>
    <hr />
    <p>Paste Your CSV code  Here:</p>
    <textarea id="csv_code" class="text">"Id","Employee Name"
"1","ABC"
"2","DEF"
"1","XYZ"</textarea>
    <br />
    <button id="convert">Convert to JSON</button>
    &nbsp;&nbsp;
    <button id="download">Download JSON</button>
    <textarea id="json" class="text"></textarea>

Then make jquery call on the button call event.There are required makes two function csv to json  and csv to array function. In the csv to json function call the csv to array function call. In the button click event call csvto json functions. 

CSV To Array Function:In this function first to pass the input data. There are required to match the diffrent char likes "",(,) ,\n,\r,\n\r,\r\r etc. Based on the comparision get values to be push into the array  and return final array.

csvto json function: In this function, first call the csvtoarray function and get array response. Then get each and every array value and add to the json string specified formates.  then return json formates.

Jquery functions click on the button, call the csvtojson function and display the json response.

function CSVToArray_converter(strData, strDelimiter) {
    strDelimiter = (strDelimiter || ",");
    var objPattern = new RegExp((
    "(\\" + strDelimiter + "|\\r?\\n|\\r|^)" +  
    "(?:\"([^\"]*(?:\"\"[^\"]*)*)\"|" +  
    "([^\"\\" + strDelimiter + "\\r\\n]*))"), "gi"); 
    var arrData = [[]];  
    var arrMatches = null;  
    while (arrMatches = objPattern.exec(strData)) {       
        var strMatchedDelimiter = arrMatches[1];       
        if (strMatchedDelimiter.length && (strMatchedDelimiter != strDelimiter)) {         
            arrData.push([]);
        }
        if (arrMatches[2]) {       
            var strMatchedValue = arrMatches[2].replace(
            new RegExp("\"\"", "g"), "\"");
        } else {         
            var strMatchedValue = arrMatches[3];
        }      
        arrData[arrData.length - 1].push(strMatchedValue);
    } 
    return (arrData);
}
function CSV2JSON_convert(csv) {
    var array = CSVToArray_converter(csv);
    var objArray = [];
    for (var i = 1; i < array.length; i++) {
        objArray[i - 1] = {};
        for (var k = 0; k < array[0].length && k < array[i].length; k++) {
            var key = array[0][k];
            objArray[i - 1][key] = array[i][k]
        }
    }
    var json = JSON.stringify(objArray);
    var str = json.replace(/},/g, "},\r\n");
    return str;
}
$(function() {
$("#convert").click(function() {
    var csv_code = $("#csv_code").val();
    var json = CSV2JSON_convert(csv_code);
    $("#json").val(json);
});
$("#download").click(function() {
    var csv_code = $("#csv_code").val();
    var json = CSV2JSON_convert(csv_code);
    window.open("data:text/json;charset=utf-8," + escape(json))
});
});

DeMO

Below Demo shows user can give csv format data and click on generate or convert formate, then get response json formates.

Let's Think together, Say Something !