Display CSV as a table in JavaScript (simple example)

Welcome to read about how to read CSV File and display it in Javascript Medium HTML Tutorials in tables . Need to be CSV Display it as before uploading to the server HTML form ？ Or there is one on the server CSV Documents need to be in HTML Show in table ？ ok , Use modern Javascript it is possible that —— Please continue to read the examples ！

ⓘ At the beginning of this tutorial, I included a that contains all the source code zip file , So you don't have to copy and paste everything …… Or if you just want to go straight into .

Sample code download

Click here to download all sample source code , I am already in MIT Release it under license , So feel free to build on it or use it in your own projects .

0) fictitious CSV

Jo Doe,[email protected],465785 Joa Doe,[email protected],123456 Job Doe,[email protected],234567 Joe Doe,[email protected],345678 Jog Doe,[email protected],578456 Joh Doe,[email protected],378945 Joi Doe,[email protected],456789 Jon Doe,[email protected],987654 Jor Doe,[email protected],754642 Joy Doe,[email protected],124578

First , Let's start from the virtual CSV File start . I don't know CSV（ Comma separated values ） How people work ：

• CSV A file is essentially a text file .
• We use line breaks \r\n To indicate the new line .
• We use commas , To represent a new column .

1) Read from the file selector CSV

1A) HTML

<!-- (A) PICK CSV FILE --> <input type="file" accept=".csv" id="demoPick"/> <!-- (B) GENERATE HTML TABLE HERE --> <table id="demoTable"></table>

For the first example , We will start from an Choose one of them CSV<input type="file"> And show it in <table id="demoTable">.

1B) JAVASCRIPT

// (A) GET HTML FILE PICKER & TABLE let picker = document.getElementById("demoPick"), table = document.getElementById("demoTable"); // (B) ON SELECTING CSV FILE picker.onchange = () => { // (B1) REMOVE OLD TABLE ROWS table.innerHTML = ""; // (B2) READ CSV & GENERATE TABLE let reader = new FileReader(); reader.addEventListener("loadend", () => { let csv = reader.result.split("\r\n"); for (let row of csv) { let tr = table.insertRow(); for (let col of row.split(",")) { let td = tr.insertCell(); td.innerHTML = col; } } }); reader.readAsText(picker.files[0]); };

I'm not going to explain it line by line , But the important part is ：

• reader.readAsText(SELECTED FILE) Will choose CSV The file reads as text .
• let csv = reader.result.split("\r\n") Remember CSV file \r\n Used to indicate the new line ？ We just put the whole “CSV Text ” The block is split into rows .
• for (let row of csv) { for (let col of row.split(",")) For each line , We further decompose the columns and draw the table rows / Cell .

Yes , you 're right . There is no need to CSV File upload to server , modern Javascript Able to read files .

2) AJAX Get... From the server CSV

2A) HTML

<!-- (A) GENERATE HTML TABLE HERE --> <table id="demoTable"></table>

If CSV The file is on the server , We can also use AJAX fetch To generate tables .

2B) JAVASCRIPT

// (A) GET HTML TABLE let table = document.getElementById("demoTable"); // (B) AJAX FETCH CSV FILE fetch("0-dummy.csv") .then((res) => { return res.text(); }) .then((csv) => { // (B1) REMOVE OLD TABLE ROWS table.innerHTML = ""; // (B2) GENERATE TABLE csv = csv.split("\r\n"); for (let row of csv) { let tr = table.insertRow(); for (let col of row.split(",")) { let td = tr.insertCell(); td.innerHTML = col; } } });

Yes , This is almost the same as the file selector example . Except for us now fetch(CSV FILE) Used to get data from the server .

Performance issues and limitations

At the time of writing , There seems to be no way to read line by line CSV file . therefore , If you are dealing with a large number of CSV file , Please be careful —— This may lead to “ Out of memory ” Problems and performance problems .