This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<html> | |
<head> | |
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> | |
<script type="text/javascript" > | |
//Function for converting from CSV to JSON. This function is consider as a backend component for performing this task. | |
var csvjsonConverter = (csvdata, delimiter) => { | |
//This array will store the each of the patterns from the regular expression below. | |
let arrmatch = []; | |
//This array will store the data from the CSV. | |
let array = [[]]; | |
//Stores matched values for quoted values. | |
let quotevals = ""; | |
//Storing JSON array | |
let jsonarray = []; | |
//Increment value | |
let k = 0; | |
//Uses regular expression to parse the CSV data and determines if any values has their own quotes in case if any | |
// delimiters are within. | |
let regexp = new RegExp(("(\\" + delimiter + "|\\r?\\n|\\r|^)" + "(?:\"([^\"]*(?:\"\"[^\"]*)*)\"|" + | |
"([^\"\\" + delimiter + "\\r\\n]*))"), "gi"); | |
//This will loop to find any matchings with the regular expressions. | |
while (arrmatch = regexp.exec(csvdata)) { | |
//This will determine what the delimiter is. | |
let delimitercheck = arrmatch[1]; | |
//Matches the delimiter and determines if it is a row delimiter and matches the values to the first rows. | |
//If it reaches to a new row, then an empty array will be created as an empty row in array. | |
if ((delimitercheck !== delimiter) && delimitercheck.length) { | |
array.push([]); | |
} | |
//This determines as to what kind of value it is whether it has quotes or not for these conditions. | |
if (arrmatch[2]) { | |
quotevals = arrmatch[2].replace('""', '\"'); | |
} | |
else { | |
quotevals = arrmatch[3]; | |
} | |
//Adds the value from the data into the array | |
array[array.length - 1].push(quotevals); | |
} | |
//This will parse the resulting array into JSON format | |
for (let i = 0; i < array.length - 1; i++) { | |
jsonarray[i - 1] = {}; | |
for (let j = 0; j < array[i].length && j < array[0].length; j++) { | |
let key = array[0][j]; | |
jsonarray[i - 1][key] = array[i][j] | |
} | |
} | |
//This will determine what the properties of each values are from the JSON | |
//such as removing quotes for integer value. | |
for(k = 0; k < jsonarray.length; k++){ | |
let jsonobject = jsonarray[k]; | |
for(let prop in jsonobject){ | |
if(!isNaN(jsonobject[prop]) && jsonobject.hasOwnProperty(prop)){ | |
jsonobject[prop] = +jsonobject[prop]; | |
} | |
} | |
} | |
//This will stringify the JSON and formatting it. | |
let formatjson = JSON.stringify(jsonarray, null, 2); | |
//Returns the converted result from CSV to JSON | |
return formatjson; | |
}; | |
//This jQuery will perform in the front-end to convert from CSV to JSON. | |
$(function () { | |
//When the 'Convert' button is clicked, it will first make sure if the csv file is uploaded and then it goes to the | |
//convert function above to convert it from CSV to JSON. Afterwards, it will print the result in a textarea. | |
$("#convert").click(function () { | |
var csv = $("#csv")[0].files[0]; | |
if (csv !== undefined) { | |
var reader = new FileReader(); | |
reader.onload = function (e) { | |
var rows = e.target.result; | |
var convertjson = csvjsonConverter(rows, $("#delimiter").val()); | |
$("#json").val(convertjson); | |
}; | |
reader.readAsText(csv); | |
} | |
else{ | |
$("#json").val(""); | |
alert("Please upload your csv file."); | |
} | |
}); | |
//After the user clicks on 'Download JSON Result" button, it will download the converted JSON file. | |
$("#download").click(function () { | |
var result = $("#json").val(); | |
if (result === null || result === undefined || result === "") { | |
alert("Please make sure there is JSON data in the text area."); | |
} | |
else { | |
$("<a />", { | |
"download": "data.json", | |
"href": "data:application/json;charset=utf-8," + encodeURIComponent(result), | |
}).appendTo("body") | |
.click(function () { | |
$(this).remove() | |
})[0].click() | |
} | |
} | |
); | |
}); | |
</script> | |
</head> | |
<body> | |
<div class="container clearfix"> | |
<div id="content"> | |
<h1>Convert CSV To JSON Example</h1> | |
<p>Click here to upload your CSV file:</p> | |
<input type="file" id="csv" /> | |
<br /> | |
<br /> | |
<p>Select your delimiter:</p> | |
<select id="delimiter"> | |
<option id="comma" value=",">,</option> | |
<option id="pipe" value="|">|</option> | |
</select> | |
<br /> | |
<br /> | |
<button class="btn btn-danger" id="convert">Convert</button> | |
<br /> | |
<br /> | |
<textarea id="json" class="textareasize"></textarea> | |
<br/> | |
<button class="btn btn-danger" id="download">Download JSON Results</button> | |
</div> | |
</div> | |
</body> | |
</html> |