Javascript to parse a CSV file and convert it into an HTML table

The Comma Separated Values, known as CSV file format is a very popular way to exchange data between applications. Now we gonna learn how to parse data from a CSV file and visualize the data in an HTML table. We’ll split it into 2 steps –

Step 1 : Retrieve data from the CSV file.
Step 2 : Parse the data and put them into an HTML table.

For this tutorial, we need a CSV file for the test. Imagine we have test.csv with the data below –

<!-- test.csv -->
ID,First Name,Last Name,Email
1,Salli,Oulett,soulett0@linkedin.com
2,Ertha,Rangell,erangell1@samsung.com
3,Garv,Hawton,ghawton2@wordpress.com
4,Catina,Lob,clob3@aol.com
5,Charla,Robberts,crobberts4@youtu.be
6,Keefe,Plumptre,kplumptre5@list-manage.com
7,Sayers,Calles,scalles6@blog.com
8,Kristi,Trevan,ktrevan7@surveymonkey.com
9,Avis,Wimbush,awimbush8@artisteer.com
10,Jabez,Chansonne,jchansonne9@biglobe.ne.jp
11,Jorey,Chasle,jchaslea@squarespace.com
12,Dion,Margram,dmargramb@soundcloud.com
13,Gaile,Hoodless,ghoodlessc@state.gov
14,Kalindi,Fender,kfenderd@cargocollective.com
15,Corney,Cuddehy,ccuddehye@icq.com

 

Step 1: Retrieve data from the CSV file.

To retrieve data from the CSV file, we can use XMLHttpRequest() or fetch(). Though, the fetch() method works on modern browsers only. Once the data is retrieved, we’ll pass them as the first argument, and the element we want append the table inside as the second argument in a function csv_string_to_table().

// Using XMLHttpRequest().
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == XMLHttpRequest.DONE) {
        if (xmlhttp.status == 200) {
            var table_container = document.getElementById('table-container');
            csv_string_to_table(xmlhttp.responseText, table_container);
        }
    }
};
xmlhttp.open("GET", "test.csv", true);
xmlhttp.send();

// Or using fetch() 
fetch('test.csv')
.then(function(response){
    return response.text();
})
.then(function(data){
    var table_container = document.getElementById('table-container');
    csv_string_to_table(data, table_container);
});

 

Step 2: Parse the data and put them into an HTML table.

Now, we gonna create the function csv_string_to_table() which will be parsing the returned data and put them in an HTML table. Then, it will append the table inside the targeted element.

function csv_string_to_table(csv_string, element_to_insert_table) {
    var rows = csv_string.trim().split(/\r?\n|\r/); // Regex to split/separate the CSV rows
    var table = '';
    var table_rows = '';
    var table_header = '';

    rows.forEach(function(row, row_index) {
        var table_columns = '';
        var columns = row.split(','); // split/separate the columns in a row
        columns.forEach(function(column, column_index) {
            table_columns += row_index == 0 ? '<th>' + column + '</th>' : '<td>' + column + '</td>';
        });
        if (row_index == 0) {
            table_header += '<tr>' + table_columns + '</tr>';
        } else {
            table_rows += '<tr>' + table_columns + '</tr>';
        }
    });

    table += '<table>';
        table += '<thead>';
            table += table_header;
        table += '</thead>';
        table += '<tbody>';
            table += table_rows;
        table += '</tbody>';
    table += '</table>';

    element_to_insert_table.innerHTML += table;
}

In this tutorial, we learned how to parse a CSV file and visualize it in an HTML table. But, if you are looking for a pre-made javascript library to parse the CSV, you can try the Papa Parse.