Tuesday, July 15, 2025
HomejQueryParsing And Displaying CSV Information In jQuery - csv.js

Parsing And Displaying CSV Information In jQuery – csv.js


csv.js is a jQuery based mostly CSV parser that parses your CSV recordsdata and converts the CSV strings into JavaScript arrays and objects for additional use. Superb for dynamically producing knowledge tables and knowledge charts/graphs from CSV recordsdata. Helps each browser and node.js.

Set up:


# NPM
$ npm set up jquery-csv --save

How one can use it:

1. Insert the primary 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 knowledge into an array of values.


$.csv.toArray(csv)

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


$.csv.toArrays(csv)

4. Parse CSV knowledge into an array of objects.


$.csv.toObjects(csv)

5. Convert arrays right into a CSV string.


$.csv.fromArrays(arrays)

6. Convert objects right into a CSV string.


$.csv.fromObjects(objects)

7. Doable plugin choices.


$.csv.functionName(csv, {

  // separator
  separator:',',

  // delimiter
  delimiter:'"',

  // exhibits headers
  headers:true

});

8. Occasion handlers.


$.csv.functionName(csv, {

  onPreParse: operate(csv, state) {
    // strips empty (unlawful) strains from the information earlier than parsing 
    var strains = $.csv.splitLines(csv);
    var output = [];
    for(var i=0, len=strains.size; i<len; i++) {
      if(strains[i] !== '') {
        output.push(strains[i]);
      }
    }
    return output.be a part of('n');
  },

  onParseEntry: operate(entry, state) {
    // solely parse rows 3 and 4
    var begin = 3;
    var finish = 4;
    if(state.rowNum >= begin && state.rowNum <= finish) {
      return entry;
    }
    return false;
  },

  onParseValue: operate(worth, state) {
    // solely parse columns 4 and 5
    var begin = 4;
    var finish = 5;
    if(state.colNum >= begin && state.colNum <= finish) {
      return worth;
    }
    return false;
  },

  onPostParse: operate(knowledge) {
    // kind the 2D array by the worth of the second column
    knowledge.kind(operate(a,b){
      return a[1] - b[1];
    });
    return knowledge;
  },

});

9. Use the plugin in node.js.


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

var pattern="pattern.csv";
fs.readFile(pattern, 'UTF-8', operate(err, csv) {
  $.csv.toArrays(csv, {}, operate(err, knowledge) {
    for(var i=0, len=knowledge.size; i<len; i++) {
      console.log(knowledge[i]);
    }
  });
});

Changelog:

v1.0.40 (2024-07-20)

  • Modernize the CI/CD workflow

v1.0.21 (2021-05-14)

  • change semistandard -> customary
  • refactor fixtures
  • rework npm scripts
  • lint every thing
  • drop htmlhint

v1.0.12 (2021-05-12)

v1.0.8 (2019-12-13)

v1.0.4 (2019-06-21)

v1.0.0 (2019-05-03)

  • mounted a bug the place onParseValue was mistakenly being utilized to the toObjects header fields
  • mounted a bug the place onPreParse wasn’t updating the enter csv string
  • mounted errors to name throw Error as a substitute of throw new Error
  • mounted bug the place that broke the Node.js callback conference when an empty choices object was equipped

v0.9.1 (2019-05-01)

2019-02-27


This superior jQuery plugin is developed by evanplaice. For extra Superior Usages, please examine the demo web page or go to the official web site.

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Recent Comments