Read a csv file using Javascript

July, 2021

Introduction

A comma-separated values (CSV) file is a delimited text file that uses a comma to separate values. Each line of the file is a data record that consists of one or more fields, separated by commas. The use of the comma as a field separator is the source of the name for this file format. The term "CSV" also denotes some closely related delimiter-separated formats that use different field delimiters, for example, semicolons, tab-separated values and space-separated values

Step 1: Define a input type in HTML

 Select a file:

<input type="file" id="myFile">

<button onclick='processFile()'>Process</button>

Step 2: Define a function to process the file in javascript

    function processFile(){

  var file = document.querySelector('#myFile').files[0];

  var reader = new FileReader();

  reader.readAsText(file);

  //if you need to read a csv file with a 'ISO-8859-1' encoding

  /*reader.readAsText(file,'ISO-8859-1');*/

  //When the file finish load

  reader.onload = function(event) {

    //get the file.

    var csv = event.target.result;

    //split and get the rows in an array

    var rows = csv.split('\n');

    //move line by line

    for (var i = 1; i < rows.length; i++) {

      //split by separator (,) and get the columns

      cols = rows[i].split(',');

      //move column by column

      for (var j = 0; j < cols.length; j++) {

        /*the value of the current column.

        Do whatever you want with the value*/

        var value = cols[j];

      }

    }

  }

}

RATE THIS ARTICLE

TheRogerLAB Codes

info@therogerlab.com