How to Read *.CSV File in JavaScript?

Reading CSV Files Using csv-parse

csv-parse is a Node.js library for parsing CSV files. It helps us to read CSV data from files and convert it into JavaScript objects or arrays, which makes it easier for manipulation and processing. It contains various different options to specify the delimiter, manage header rows, etc.

Steps to Read CSV Files

Follow the given steps to read CSV files using csv-parse:

• Install the library: We first need to install the csv-parse library by using npm ( node package manager ).
   
• Import the parse function: Next, we need to import the parse function from the csv-parse library. This can be done by using the require method.
   
• Specify the path: Create a variable path, and specify the path of the CSV file that we will use to read data from.
   
• Create a read stream: We will create the read stream using fs.createReadStream(path) to read the contents of the file in the chunks and send it to the pipeline. 
   
• Parse the CSV data: Now, we will pipe the stream through the parse function and can specify various options like
  
  
  • delimiter: specifies that a comma is used as the delimiter in our CSV file.
     
  • from_line: used to specify the line from which we want to start parsing. 
     
• Attach the event handlers: Create the following event handlers to the parse stream:
   
  • .on("data", function (row)): executed for each row of data that is parsed. It logs each row to the console.
     
  • .on("error", function (error)): handles any errors that occur during parsing and logs the error message.
     
  • .on("end", function ()): executed when parsing is complete and logs the message provided by us.
     

Code

• JavaScript

JavaScript

const { parse } = require("csv-parse");
const fs = require("fs");

// specify the path of the CSV file
const path = "./StudentsData.csv";

// Create a readstream
// Parse options: delimiter and start from line 1

fs.createReadStream(path)
  .pipe(parse({ delimiter: ",", from_line: 1 }))
  .on("data", function (row) {
    // executed for each row of data
    console.log(row);
  })
  .on("error", function (error) {
    // Handle the errors
    console.log(error.message);
  })
  .on("end", function () {
    // executed when parsing is complete
    console.log("File read successful");
  });

You can also try this code with Online Javascript Compiler

Run Code

Output

Reading CSV Files Using Node.js Native Module

We can read the CSV files in JavaScript using Node.js without any external libraries or modules, this can be done by using the built-in fs (file system) module for reading files and the readline module for processing lines.

Steps to Read CSV Files

Follow the given steps to read CSV files using the node.js native module:

• Import the modules: We first need to import the fs and readline modules in our javascript code. 
   
• Specify the path: Create a variable path and specify the path of the CSV file that we will use to read data from.
   
• Create a read stream: Create a read stream using fs.createReadStream for the CSV file.
   
• Create a readline interface: Create a readline interface to read lines from the file, specifying the input as the readStream. 
   
• Initialize an output array: Create an array for storing the parsed CSV data.
   
• Attach the event handlers: Create the following event handlers:
  
  
  • readInterface.on("line", ...): It is called for each line in the CSV file. It splits each line using a comma as the delimiter and adds it as an array to the output array.
     
  • readInterface.on("close", ...): It is called when the end of the file is reached. The entire file data is now read in the output.
     
  • readInterface.on("error", ...): It handles the errors and logs an error message.
     

Code

• JavaScript

JavaScript

const fs = require("fs");
const readline = require("readline");

// specify the path of the CSV file
const path = "StudentsData.csv";

// Create a read stream
const readStream = fs.createReadStream(path);

// Create a readline interface
const readInterface = readline.createInterface({
  input: readStream
});

// Initialize an array to store the parsed data
const output = [];

// Event handler for reading lines
readInterface.on("line", (line) => {
  const row = line.split(",");
  output.push(row);
});

// Event handler for the end of file
readInterface.on("close", () => {
  console.log(output);
});

// Event handler for handling errors
readInterface.on("error", (err) => {
  console.error("Error reading the CSV file:", err);
});

You can also try this code with Online Javascript Compiler

Run Code

Output

Reading CSV Files Using the fs Module

The fs module in Node.js stands for "File System" and is a built-in module that provides functions for working with the file system, allowing us to perform various file-related operations. We can read the CSV files using the fs Module.

Steps to Read CSV Files

Follow the given steps to read CSV files using the fs module:

• Import the module: We first need to import the fs module in our javascript code. 
   
• Specify the path: Create a variable path and specify the path of the CSV file that we will use to read data from.
   
• Read the CSV file: We can use the fs.readFile to read the CSV file. It contains a callback function, which is called when the file reading is completed or when an error occurs.
   
• Split the data: Split the CSV data into lines using data.split("\n"). Each line in the CSV file represents a record.
   
• Initialize an output array: Create an array for storing the parsed CSV data.
   
• Process the file: Loop through each line using lines.forEach(). For each line, split it into fields using the line.split(","), and push the array of fields into the output array.
   
• Log the output: The output contains the entire CSV data in the form of a 2-D array. Log the output to show it on screen.
   

Code

• JavaScript

JavaScript

// Include the fs module
const fs = require("fs");

// Specify the path of the CSV file
const path = "StudentsData.csv";

// Read the CSV file
fs.readFile(path, "utf8", (err, data) => {
  if (err) {
    console.error("Error while reading:", err);
    return;
  }

  // Split the data into lines
  const lines = data.split("\n");

  // Initialize the output array
  const output = [];

  // Loop through each line and split it into fields
  lines.forEach((line) => {
    const fields = line.split(",");
    output.push(fields);
  });

  // Log the output array
  console.log(output);
});

You can also try this code with Online Javascript Compiler

Run Code

Output

Frequently Asked Questions

Why are CSV files used?

CSV files are largely used for storing and exchanging tabular data. CSV files are often used in various contexts for data storage, data exchange, and data manipulation due to their simplicity and compatibility with many applications.

How can we handle the asynchronous nature of file reading?

We can attach an event listener to the onload event of the FileReader object to handle the file reading completion and data processing.

Can we use external libraries for CSV parsing?

Yes, there are libraries like PapaParse and CSV-parser that simplify CSV parsing in JavaScript by providing more advanced features and error handling.

Also read about:   jquery ajax

Conclusion

In this article, we discussed, in brief, what CSV files are and how we can read data from them with JavaScript. We have learnt various methods of doing the same, which include reading data using csv-parse, node.js native module, and the fs module. 

To learn more about JavaScript, you can read these articles.

• JavaScript with HTML
• JavaScript Projects
• JavaScript Applications

Refer to our Guided Path to upskill yourself in DSA, Competitive Programming, JavaScript, System Design, and many more! If you want to test your competency in coding, you may check out the mock test series and participate in the contests hosted on Coding Ninjas Studio!

But suppose you have just started your learning process and are looking for questions from tech giants like Amazon, Microsoft, Uber, etc. For placement preparations, you must look at the problems, interview experiences, and interview bundles.

We wish you Good Luck! 

Happy Learning!