How to Read CSV file and Display its content using JavaScript

In JavaScript FileReader class is available to read the data of the file. Using this you can read and view the file content before uploading it to the server.

In this tutorial, I show how you can use FileReader class to read CSV file and display its content on the page using JavaScript.

---

Table of Content

1. CSV file structure
2. HTML Layout to Display CSV data
3. JavaScript – Read CSV file
4. Output
5. Conclusion

---

1. CSV file structure

In the example, I am using the following file structure –

S.no,Username,Name,Email
1,yssyogesh,Yogesh singh,yogesh@makitweb.com
2,bsonarika,Sonarika Bhadoria,bsonarika@makitweb.com
3,vishal,Vishal Sahu,vishal@makitweb.com
4,anilsingh,Anil singh,anilsingh@makitweb.com

---

2. HTML Layout to Display CSV data

Create a file element and a button. Using <table > to list selected CSV file data. Add onclick event on the button. It calls readCSVFile() function.

<!-- CSS -->
<style type="text/css">
    table th, table td{
    padding: 5px;
}
</style>

<div>

    <div>
         <input type="file" name="file" id="file" accept=".csv" > <br><br>
         <input type="button" id="btnsubmit" value="Submit" onclick="readCSVFile();" >
    </div>

    <br><br>
    <!-- List CSV file data -->
    <table id="tblcsvdata" border="1" style="border-collapse: collapse;">
         <thead>
              <tr>
                  <th>S.no</th>
                  <th>Username</th>
                  <th>Name</th>
                  <th>Email</th>
              </tr>
         </thead>
         <tbody>

         </tbody>

    </table>
</div>

---

3. JavaScript – Read CSV file

Create readCSVFile() function that calls on button click. Check if a file is selected or not.

---

Read CSV file and Display data –

• Create an object of FileReader Class if a file is selected.
• Pass file instance in readAsText() to read its data as a string.
• Add onload event on the reader object. It calls when the file successfully gets read.
• Use result property to get file data. Assign the data to csvdata variable.
• Split the string data by line break (\n) to get data in Array format.
• Create an instance of <table > <tbody > where need to append data.
• Loop on the rowData Array. Here, for not reading 1st row I assigned 1 to row variable but you can assign 0 if you want to read 1st row.
• Create an empty <tr> – tbodyEl.insertRow().
• Split the row value by comma (,) to get column data Array.
• Loop on the rowColData Array to read column data. Create a cell and add column value – rowColData[col].

Full Code

function readCSVFile(){
     var files = document.querySelector('#file').files;

     if(files.length > 0 ){

          // Selected file
          var file = files[0];

          // FileReader Object
          var reader = new FileReader();

          // Read file as string 
          reader.readAsText(file);

          // Load event
          reader.onload = function(event) {

               // Read file data
               var csvdata = event.target.result;

               // Split by line break to gets rows Array
               var rowData = csvdata.split('\n');

               // <table > <tbody>
               var tbodyEl = document.getElementById('tblcsvdata').getElementsByTagName('tbody')[0];
               tbodyEl.innerHTML = "";

               // Loop on the row Array (change row=0 if you also want to read 1st row)
               for (var row = 1; row < rowData.length; row++) {

                     // Insert a row at the end of table
                     var newRow = tbodyEl.insertRow();

                     // Split by comma (,) to get column Array
                     rowColData = rowData[row].split(',');

                     // Loop on the row column Array
                     for (var col = 0; col < rowColData.length; col++) {

                          // Insert a cell at the end of the row
                          var newCell = newRow.insertCell();
                          newCell.innerHTML = rowColData[col];

                     }

               }
          };

     }else{
          alert("Please select a file.");
     }

}

---

4. Output

View Output

---

5. Conclusion

You can use this code to display a preview of file data or you can also modify the code for applying validation.

Adjust the code according to your CSV file while implementing this on your project.

If you found this tutorial helpful then don't forget to share.