Reading a CSV File Using jQuery and Display into HTML Table

This tutorial helps to parse a CSV File into an array and display it to a table With JavaScript.I am using jquery-csv JavaScript library to read and parse CSV file and display them in an HTML table. You can create your custom JavaScript parser to read csv file and display into html table as well.

You can easily read CSV file into an array using this JavaScript plugin. You can also use the Javascript plugin Papa Parse to read CSV data into HTML table

Why Use jquery-csv for Reading CSV Files?

I am using an open source jquery-csv parser to read and parse csv file using Ajax. The jquery-csv library simplifies the process of parsing and manipulating CSV data in JavaScript. It provides convenient methods to read and convert CSV data into JSON objects, making it easier to work with the data and extract the desired information.

The jquery-csv is a popular and optimized library with support IETF RFC 4180 compliance.

jQuery CSV main features are as follows

• It converts a CSV file into an array
• Convert a multi-line CSV string to a 2D array
• Convert a multi-line CSV string to an array of objects
• Hooks/Callbacks to extend the default parsing process
• Customizable delimiter (default: “) and separator (default: ,) characters
• Node.js support (ie CommonJS importing and async callback support)

What’s CSV (Comma Separated Values)

TCSV (Comma Separated Values) files are widely used for storing and exchanging tabular data. They provide a simple and efficient way to represent structured data.

I will read the CSV file using jquery-csv and convert the CSV file into array to display data in html page.

You can also check other recommended tutorials of CSV,

• Reading csv file using JavaScript and HTML5
• Exporting a DataTable to CSV
• DataTables Export to Excel using HTML5

Simple Example of CSV to HTML Table Using JavaScript

I will demonstrate the use of jquery-csv JavaScript library using a sample index.html file. We will create a sample CSV file and read it into an array. finally, we will show these CSV array data in an HTML table.

Before we begin, make sure you have the following basic knowledge:

• Basic knowledge of HTML, CSS, and JavaScript.
• jQuery library: You can either download it and include it locally or use a Content Delivery Network (CDN) to reference it in your HTML file.
• jquery-csv: You can download it from the jquery-csv GitHub repository or use a CDN to reference it in your HTML file.

Creating A Sample CSV File

I am taking a sample CSV file, You can also create a sample csv file using online generator tools.

Use jQuery CSV Library File

I am including jquery-csv file in the head section of index.html file.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-csv/0.71/jquery.csv-0.71.min.js"></script>

I am using the CDN URL to include jquery-csv file, you can download a file from Gitlab and use it locally.

Read CSV File to JSON Object

The jquery-csv provides many methods to convert CSV string to array, into arrays, objects, etc. You can use one of the methods as per your requirement. I am using toArrays() method to convert CSV into arrays.

I am using the jQuery ajax method to get CSV file data and parse them.

var data;
	$.ajax({
	  type: "GET",  
	  url: "js-tutorials.com_sample_file.csv",
	  dataType: "text",       
	  success: function(response)  
	  {
		data = $.csv.toArrays(response);
		generateHtmlTable(data);
	  }   
	});

As you can see, I am using js-tutorials.com_sample_file.csv for csv sample data and accessing csv data using ajax GET method, on success ajax method, I am using custom generateHtmlTable() method to create an HTML table using CSV data, now passing csv data as a parameter to generateHtmlTable() method.

Display CSV Data to HTML Table

After successfully parsing csv file data using the jquery-csv library, I am generating HTML table and displaying into html page(index.html).

function generateHtmlTable(data) {
    var html = '';

      if(typeof(data[0]) === 'undefined') {
        return null;
      } else {
		$.each(data, function( index, row ) {
		  //bind header
		  if(index == 0) {
			html += '';
			html += '';
			$.each(row, function( index, colData ) {
				html += '';
			});
			html += '';
			html += '';
			html += '';
		  } else {
			html += '';
			$.each(row, function( index, colData ) {
				html += '';
			});
			html += '';
		  }
		});
		html += '';
		html += '
<table class="table table-condensed table-hover table-striped">
<thead>
<tr>
<th>';
				html += colData;
				html += '</th>
</tr>
</thead>
<tbody>
<tr>
<td>';
				html += colData;
				html += '</td>
</tr>
</tbody>
</table>
';
		alert(html);
		$('#csv-display').append(html);
	  }
	}

I have added a condition to add the first row into the head section of the HTML table and the rest CSV data rows will be as data rows.

Conclusion

In this quick javascript read CSV file article, We have gone through the steps to read csv file and convert it into arrays suing jquery-csv plugin, We have also parsed these csv array data and displayed into an HTML table.

You can download the source code and Demo from the below link.