Parsing And Displaying CSV Files In jQuery - csv.js

File Size: 127 KB
Views Total: 19783
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Parsing And Displaying CSV Files In jQuery - csv.js

csv.js is a jQuery based CSV parser that parses your CSV files and converts the CSV strings into JavaScript arrays and objects for further use. Ideal for dynamically generating data tables and data charts/graphs from CSV files. Supports both browser and node.js.

Installation:

# NPM
$ npm install jquery-csv --save

How to use it:

1. Insert the main JavaScript file csv.js after jQuery JavaScript library.

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/src/jquery.csv.min.js"></script>

2. Parse a single line of CSV data into an array of values.

$.csv.toArray(csv)

3. Parse CSV data into a JavaScript 2D (two-dimensional) array.

$.csv.toArrays(csv)

4. Parse CSV data into an array of objects.

$.csv.toObjects(csv)

5. Convert arrays into a CSV string.

$.csv.fromArrays(arrays)

6. Convert objects into a CSV string.

$.csv.fromObjects(objects)

7. Possible plugin options.

$.csv.functionName(csv, {

  // separator
  separator:',',

  // delimiter
  delimiter:'"',

  // shows headers
  headers:true

});

8. Event handlers.

$.csv.functionName(csv, {

  onPreParse: function(csv, state) {
    // strips empty (illegal) lines from the data before parsing 
    var lines = $.csv.splitLines(csv);
    var output = [];
    for(var i=0, len=lines.length; i<len; i++) {
      if(lines[i] !== '') {
        output.push(lines[i]);
      }
    }
    return output.join('\n');
  },

  onParseEntry: function(entry, state) {
    // only parse rows 3 and 4
    var start = 3;
    var end = 4;
    if(state.rowNum >= start && state.rowNum <= end) {
      return entry;
    }
    return false;
  },

  onParseValue: function(value, state) {
    // only parse columns 4 and 5
    var start = 4;
    var end = 5;
    if(state.colNum >= start && state.colNum <= end) {
      return value;
    }
    return false;
  },

  onPostParse: function(data) {
    // sort the 2D array by the value of the second column
    data.sort(function(a,b){
      return a[1] - b[1];
    });
    return data;
  },

});

9. Use the plugin in node.js.

var fs = require('fs');
var $ = jQuery = require('jQuery');
require('src/jquery.csv.js');

var sample = 'sample.csv';
fs.readFile(sample, 'UTF-8', function(err, csv) {
  $.csv.toArrays(csv, {}, function(err, data) {
    for(var i=0, len=data.length; i<len; i++) {
      console.log(data[i]);
    }
  });
});

Changelog:

v1.0.21 (2021-05-14)

  • change semistandard -> standard
  • refactor fixtures
  • rework npm scripts
  • lint everything
  • drop htmlhint

v1.0.12 (2021-05-12)

v1.0.8 (2019-12-13)

  • Updated

v1.0.4 (2019-06-21)

  • Bugfixed

v1.0.0 (2019-05-03)

  • fixed a bug where onParseValue was mistakenly being applied to the toObjects header fields
  • fixed a bug where onPreParse wasn't updating the input csv string
  • fixed errors to call throw Error instead of throw new Error
  • fixed bug where that broke the Node.js callback convention when an empty options object was supplied

v0.9.1 (2019-05-01)

  • Cleanup

2019-02-27

  • v0.8.12

This awesome jQuery plugin is developed by evanplaice. For more Advanced Usages, please check the demo page or visit the official website.