jQuery CSV

Established in 2012, when JavaScript's library infrastructure was still in its infancy, the jQuery-csv plugin by Evan Plaice emerged as the premier CSV parser conforming to specifications. It's a robust solution optimized for performance, adhering to traditional jQuery syntax, and featuring a lightweight Chomsky - Type III parser implementation. The plugin is entirely client-side processing oriented, supporting all possible CSV text formats, and can handle large CSV data files. Additionally, it supports multiple jQuery versions with an efficient API that developers can adapt according to their needs. The plugin is 100% compliant with IETF RFC 4180, further addressing aspects that the specification may have inadvertently left out. Furthermore, it offers comprehensive solutions for CSV to Array, CSV to JSON, and CSV to Table conversions, making it simpler for developers to manipulate and transform the CSV data format to diverse types, ultimately ensuring an effective data visualization strategy for your website.

jQuery-csv CDN

Before using the plugin, you need to include both jQuery and the jQuery CSV library to your HTML file.

<script src="https://cdn.tutorialjinni.com/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdn.tutorialjinni.com/jquery-csv/1.0.21/jquery.csv.min.js"></script>

jQuery CSV to Array

The toArrays method provided by the jQuery CSV plugin can convert the CSV data into a multi-dimensional array.

//example CSV data
var data = "Column1,Column2nValue1,Value2nValue3,Value4";   

var csvAsArray = $.csv.toArrays(data);
console.log(csvAsArray);

The output will be:

[["Column1", "Column2"], ["Value1", "Value2"], ["Value3", "Value4"]]

jQuery CSV to Array JSON

The toObjects method allows you to convert CSV to array of objects (JSON format). It utilizes the header row to determine the keys for the JSON objects.

var data = "Column1,Column2nValue1,Value2nValue3,Value4"; 

var csvAsObjects = $.csv.toObjects(data);
console.log(JSON.stringify(csvAsObjects));

The output will be:

[
{"Column1":"Value1","Column2":"Value2"},
{"Column1":"Value3","Column2":"Value4"}
]

jQuery CSV to Table

You can make use of the resulting Array or JSON from previous conversions to dynamically create a table.

var data = "Column1,Column2nValue1,Value2nValue3,Value4";
var csvAsArray = $.csv.toArrays(data);

var table = $("<table />");
$.each(csvAsArray, function (rowIndex, r) {
    var row = $("<tr />");
    $.each(r, function (colIndex, c) { 
        row.append($("<t"+(rowIndex == 0 ? "h" : "d")+"/>").text(c));
    });
    table.append(row);
});
$("#myDiv").append(table);

In this example, `myDiv` is the id of a div where you want to append the table. Make sure you replace it with a correct id present in your HTML. If the CSV data contains headers, they will be set as table headers (`<th></th>`) and the remaining data will be table data (`<td></td>`).