Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to read data from *.CSV file using JavaScript?
In this article, we are going to learn how to read data from *.CSV file using JavaScript.
To convert or parse CSV data into an array, we need JavaScript's FileReader class, which contains a method called readAsText() that will read a CSV file content and parse the results as string text.
If we have the string, we can create a custom function to turn the string into an array.
To read a CSV file, first we need to accept the file.
Now let's see how to accept the csv file from browser using HTML elements.
Creating the HTML Form
Following is the example program to accept the csv file from the browser.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<form id="myForm">
<input type="file" id="csvFile" accept=".csv" />
<br />
<input type="submit" value="Submit" />
</form>
</body>
</html>
We can now choose a csv file that need to be read.
Reading the CSV File Content
Following is the example program, which accepts and reads the csv file.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<form id="myForm">
<input type="file" id="csvFile" accept=".csv" />
<br />
<input type="submit" value="Submit" />
</form>
<div id="output"></div>
<script>
const myForm = document.getElementById("myForm");
const csvFile = document.getElementById("csvFile");
myForm.addEventListener("submit", function (e) {
e.preventDefault();
const input = csvFile.files[0];
if (!input) {
alert("Please select a CSV file");
return;
}
const reader = new FileReader();
reader.onload = function (e) {
const text = e.target.result;
document.getElementById("output").innerHTML = "<pre>" + text + "</pre>";
};
reader.readAsText(input);
});
</script>
</body>
</html>
Parsing CSV Data into Array
To make the CSV data more useful, we can parse it into a JavaScript array. Here's a function that converts CSV text into a structured array:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSV Parser</title>
</head>
<body>
<form id="myForm">
<input type="file" id="csvFile" accept=".csv" />
<br />
<input type="submit" value="Parse CSV" />
</form>
<div id="output"></div>
<script>
function parseCSV(text) {
const lines = text.split('
');
const result = [];
for (let i = 0; i < lines.length; i++) {
const row = lines[i].split(',');
if (row.length > 1 || (row.length === 1 && row[0] !== '')) {
result.push(row);
}
}
return result;
}
const myForm = document.getElementById("myForm");
const csvFile = document.getElementById("csvFile");
myForm.addEventListener("submit", function (e) {
e.preventDefault();
const input = csvFile.files[0];
if (!input) {
alert("Please select a CSV file");
return;
}
const reader = new FileReader();
reader.onload = function (e) {
const text = e.target.result;
const data = parseCSV(text);
// Display parsed data
let output = "<h3>Parsed CSV Data:</h3>";
output += "<table border='1'>";
data.forEach(function(row, index) {
output += "<tr>";
row.forEach(function(cell) {
output += "<td>" + cell.trim() + "</td>";
});
output += "</tr>";
});
output += "</table>";
document.getElementById("output").innerHTML = output;
};
reader.readAsText(input);
});
</script>
</body>
</html>
Key Points
- Use
FileReaderAPI to read CSV file contents - The
readAsText()method converts file to string - Parse CSV by splitting on newlines and commas
- Always validate file selection before processing
- Handle empty rows and trim whitespace for clean data
Conclusion
Reading CSV files in JavaScript is straightforward using the FileReader API. You can display the raw content or parse it into structured arrays for further processing in your web applications.
41K+ Views
