Skip to content

Instantly share code, notes, and snippets.

@qwerty13

qwerty13/csv_to_json.html

Created June 7, 2023 11:36
Show Gist options
  • Save qwerty13/64908ccf61315fe9ed02f0cff68c0b8b to your computer and use it in GitHub Desktop.
Save qwerty13/64908ccf61315fe9ed02f0cff68c0b8b to your computer and use it in GitHub Desktop.
Download ZIP
One Document CSV to JSON Maker (Arrays as number of columns) using HTML, CSS and JS
Raw
csv_to_json.html
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>CSV To JSON</title>
<style>
BODY {font: 16px/1.4 Trebuchet MS, Arial, sans-serif;color: #000;}A {color: steelblue;}H1 {font: 2em/1.4 Georgia, serif;text-align: center;}H4 {margin: 0;margin-bottom: 0.15em;font: 1.3em/1.4 Georgia, serif;}P {margin: 1.2rem 0;}TEXTAREA {width: 100%;height: 150px;margin: 0;border: 1px solid #CCC;border-radius: 10px;font-size: 13px;font-family: monospace;}CODE {padding: 0 3px;background: #EEE;border-radius: 5px;text-shadow: 1px 1px 0 white;font: 14px/1.4 monospace;color: #333;}CODE I {font-style: italic;color: black;}.wrapper {width: 650px;margin: 1.5rem auto 4rem;}.header {position: relative;margin-bottom: 2rem;padding-bottom: 1rem;border-bottom: 1px solid #CCC;}.header::before {content: "";display: table;width: 100%;clear: both;}.footer {position: relative;display: flex;justify-content: space-between;margin-top: 3rem;padding-top: 2rem;border-top: 1px solid #CCC;}.panel {position: relative;z-index: 1;margin-bottom: 2.5rem;display: flex;justify-content: space-between;}.button-example, .copy-button {padding: 0;border: 0;border-bottom: 1px dashed;background: transparent;align-self: center;font: inherit;line-height: 1;font-size: 14px;color: steelblue;cursor: pointer;}.containers {margin-bottom: 32px;display: flex;flex-wrap: wrap;justify-content: space-between;}.container {position: relative;width: 48%;margin-bottom: 1em;display: flex;flex-wrap: wrap;justify-content: space-between;align-content: flex-start;}
</style>
</head>
<body>
<div class="wrapper">
<header class="header">
<h1>CSV To JSON (Non Standard)</h1>
</header>
<main>
<div class="containers">
<div class="container container--left container container--init">
<h4>Insert CSV:</h4>
<button id="button-example" class="button-example">Example</button>
<textarea id="csv_text" spellcheck="false"></textarea>
</div>
<div class="container container--right container container--result">
<h4>JSON encoded:</h4>
<textarea id="json_text" spellcheck="false"></textarea>
</div>
</div>
</main>
<footer class="footer">
<a href="https://mortezarastegar.ir">@qwerty13</a>
</footer>
</div>
<script type="text/javascript">
document.getElementById("csv_text").oninput = function () {
getResults();
};
document.getElementById("button-example").addEventListener('click', () => {
document.getElementById("csv_text").value = 'chiz,miz,duo,commit\n1,2,3,4\n5,6,7,8\n9,10,11,12';
getResults();
});
function getResults() {
var myCSV = document.getElementById("csv_text").value;
var myJSON = {};
var CSVRows = myCSV.split("\n"); // Split Rows by newline
var CSVKeys = CSVRows[0].split(","); // Split Keys by comma
for (let i = 0; i < CSVKeys.length; i++) {
myJSON[CSVKeys[i]] = []; // Make Arrays
}
CSVRows.shift(); // Remove first item
CSVRows.forEach(CSVRow => {
CSVRowData = CSVRow.split(","); // Split Row's Data by comma
CSVKeys.forEach(CSVKey => {
});
for (let i = 0; i < CSVKeys.length; i++) {
myJSON[CSVKeys[i]].push(CSVRowData[i]); // Put every data in key's related array
}
});
// Put the result
document.getElementById("json_text").value = JSON.stringify(myJSON);
}
</script>
</body></html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment