Convert CSV to JSON

Change class name on click in jQuery

by Johnny Lee

HTML

<h1>
  CSV to JavaScript object Converter
</h1>
<div id="main">
  <p>
    Root object name: <input id="rootObjName" type="text" value="root">
    Separator: <input id="separator" type="text" value=",">
    <input id="withTitle" type="checkbox" checked>With title
  </p>
  <p>
    Input: <textarea name="input"  id="input" rows="5" cols="30">a,b,c
1,2,3
4,5,6
7,8,9</textarea>
  </p>
  <p>
    <button>
      Convert
    </button>
  </p>
  <p>
    Output: <textarea name="input"  id="output" rows="5" cols="80" readonly></textarea>
    <br />
    Click in the box above, press Ctrl-A and then Ctrl-C to copy to clipboard.
  </p>
</div>

CSS

body {
  background: white;
  padding: 4px;
  font-family: 微軟正黑體, Arial;
  font-size: 0.8em;
}
h1 {
  margin: 3px;
}
p, textarea {
  margin: 4px;
}
#main {
  background: #fff;
  border-radius: 4px;
  padding: 4px;
  text-align: left;
  transition: all 0.2s;
  margin: 0 auto;
  width: 90%;
}
#separator, #rootObjName {
  width:40px;
  text-align: center;
}
#input, #output {
  margin-left: 0;
  border: 1px solid black;
  width: 95%;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;  
  color: #fff;
}

#banner-message.alt {
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
  width: 200px;
}

#banner-message.alt button {
  background: #fff;
  color: #000;
}

JavaScript

const objBaseName = "obj_";
const rootDefaultName = "root";
var jButton = $("button");
var jInput = $("#input");
var jOutput = $("#output");
var jRootObjName = $('#rootObjName');
var jWithTitle = $("#withTitle");
var jSeparator = $("#separator");
var varNoCount = 0;
var rootObjName = '';
var headLine = '';
var outputRows = [];
var objectNames = [];

jButton.on("click", function(){ // Set listener
	rootObjName = jRootObjName.val().trim();
	rootObjName = (rootObjName == '')? rootDefaultName : rootObjName;
  outputRows = [];
  objectNames = [];
  jOutput.text(convert(jInput.val()));
})

function convert(input) {
	if (!input || input.trim() == '') // 防呆
  	return "Input is null or empty. Please try again";
    
  let withTitle = jWithTitle.prop("checked");
  let rows = input.split('\n');
	let rowNum = rows.length;
  let sep = jSeparator.val(); // new RegExp(separator);
  let colNum = -1;
  
  headLine = 'const ' + rootObjName + ' = [\n';
  
  for (i=0; i<rowNum; i++) {
  	let row = rows[i].trim();
    let rowText;
    let outputCols = [];
    if (row != '') {
    	let cols = row.split(sep);
      if (colNum < 0) // Set colNum the first time
    		colNum = cols.length;
      else if (colNum != cols.length) // 防呆
      	return "Invalid data found in line " + (i+1) + ' ('+ cols[0] + "): Column width (" + cols.length + ") mismatched (" + colNum + ")!";
      
      // Prepare object names
      if (i==0) { // First row
      	if (withTitle) { // Title row
        	for (j=0; j<colNum; j++) {
          	if (cols[j] && cols[j].trim() != '')
          		objectNames.push(cols[j].trim());
            else
            	objectNames.push('col_' + j);
          }
          continue; // Skip to the next line
        } 
        else {
        	for (j=0; j<colNum; j++) {
          	objectNames.push(objBaseName + (j+1));
          }
        }
      }

      // Process objects
      outputCols = [];
      rowText = '';
      for (j=0; j<colNum; j++) {
      	outputCols.push('"' +...