chongkong/csv-table.html

## csv-table.html
<!doctype html>
<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
  <section>
    <div class="container">
      <h1>CSV Table Example</h1>
      <label>CSV File</label>
      <input id="file-input" type="file" onchange="">
      <hr>
      <table id="table" class="table"></table>
    </div>

  <script>
    <!-- Javascript Get File Input: http://stackoverflow.com/questions/750032/reading-file-contents-on-the-client-side-in-javascript-in-various-browsers -->
    var fileInputElem = document.getElementById("file-input");
    var tableElem = document.getElementById("table");

    function parseCSV(csvString) {
      let [firstLine, ...remainingLines] = csvString.split('\n');
      return {
        columnNames: firstLine.split(','),
        rows: remainingLines.map(line => line.split(','))
      };
    }

    function validateCSV({columnNames, rows}) {
      let columnLength = columnNames.length;
      return rows.every(row => row.length === columnLength);
    }

    function drawTable(tableRootElem, csvData) {
      while (tableRootElem.firstChild)
        tableRootElem.removeChild(tableRootElem.firstChild);
      let tableHeadElem = document.createElement('thead');
      let tableBodyElem = document.createElement('tbody');
      tableRootElem.appendChild(tableHeadElem);
      tableRootElem.appendChild(tableBodyElem);

      let firstRowElem = document.createElement("tr");
      csvData.columnNames.forEach(columnName => {
        let cellElem = document.createElement("th");
        cellElem.textContent = columnName;
        firstRowElem.appendChild(cellElem);
      });
      tableHeadElem.appendChild(firstRowElem);

      csvData.rows.forEach(row => {
        let rowElem = document.createElement("tr");
        row.forEach(data => {
          let cellElem = document.createElement("td");
          cellElem.textContent = data;
          rowElem.appendChild(cellElem);
        });
        tableBodyElem.appendChild(rowElem);
      });
    }

    fileInputElem.onchange = () => {
      if (fileInputElem.files.length > 0) {
        let file = fileInputElem.files[0];
        let reader = new FileReader();

        reader.readAsText(file, "UTF-8");
        reader.onload = (event) => {
          let csvString = event.target.result;
          let csvData = parseCSV(csvString);
          if (validateCSV(csvData)) {
            drawTable(tableElem, csvData);
          } else {
            alert("wrong CSV format")
          }
        }
      }
    };

  </script>
</body>
	<!doctype html>
	<head>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
	</head>
	<body>
	<section>
	<div class="container">
	<h1>CSV Table Example</h1>
	<label>CSV File</label>
	<input id="file-input" type="file" onchange="">
	<hr>
	<table id="table" class="table"></table>
	</div>

	<script>
	<!-- Javascript Get File Input: http://stackoverflow.com/questions/750032/reading-file-contents-on-the-client-side-in-javascript-in-various-browsers -->
	var fileInputElem = document.getElementById("file-input");
	var tableElem = document.getElementById("table");

	function parseCSV(csvString) {
	let [firstLine, ...remainingLines] = csvString.split('\n');
	return {
	columnNames: firstLine.split(','),
	rows: remainingLines.map(line => line.split(','))
	};
	}

	function validateCSV({columnNames, rows}) {
	let columnLength = columnNames.length;
	return rows.every(row => row.length === columnLength);
	}

	function drawTable(tableRootElem, csvData) {
	while (tableRootElem.firstChild)
	tableRootElem.removeChild(tableRootElem.firstChild);
	let tableHeadElem = document.createElement('thead');
	let tableBodyElem = document.createElement('tbody');
	tableRootElem.appendChild(tableHeadElem);
	tableRootElem.appendChild(tableBodyElem);

	let firstRowElem = document.createElement("tr");
	csvData.columnNames.forEach(columnName => {
	let cellElem = document.createElement("th");
	cellElem.textContent = columnName;
	firstRowElem.appendChild(cellElem);
	});
	tableHeadElem.appendChild(firstRowElem);

	csvData.rows.forEach(row => {
	let rowElem = document.createElement("tr");
	row.forEach(data => {
	let cellElem = document.createElement("td");
	cellElem.textContent = data;
	rowElem.appendChild(cellElem);
	});
	tableBodyElem.appendChild(rowElem);
	});
	}

	fileInputElem.onchange = () => {
	if (fileInputElem.files.length > 0) {
	let file = fileInputElem.files[0];
	let reader = new FileReader();

	reader.readAsText(file, "UTF-8");
	reader.onload = (event) => {
	let csvString = event.target.result;
	let csvData = parseCSV(csvString);
	if (validateCSV(csvData)) {
	drawTable(tableElem, csvData);
	} else {
	alert("wrong CSV format")
	}
	}
	}
	};

	</script>
	</body>