Read CSV Files Data in HTML Table using JavaScript Fetch Method | CSV to HTML | JS | CSV File Reader
Source code to fetch and read csv file
Replace the test.csv with your csv file name.
<!DOCTYPE html>
<html lang="en">
<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">
<title>Read CSV files with javascript fetch method</title>
<style>
td {
border: 2px solid blue;
}
</style>
</head>
<body>
<table>
</table>
<script>
// tutorial link : https://www.youtube.com/watch?v=gnqHNJNc_0A
onload = fetch("./test.csv").then(res => {
return res.text()
}).then(data => {
let result = data.split(/\r?\n|\r/).map(e => {
return e.split(",")
})
result.forEach(e => {
let m = e.map(e => {
return `<td>${e}</td>`;
}).join("")
let ce = document.createElement("tr");
ce.innerHTML = m;
if (ce.innerText != "") {
document.querySelector("table").appendChild(ce);
}
// console.log(m);
})
})
</script>
</body>
</html>
Explanation of Above Code.
This code is an HTML file that reads a CSV file using the fetch method in JavaScript, parses the data, and displays it in an HTML table.
Here is a step-by-step explanation of the code:
The HTML file begins with the usual DOCTYPE declaration and an HTML opening tag.
The head section contains metadata about the HTML document, such as the character set, viewport, and title. The title of this HTML file is "Read CSV files with javascript fetch method."
The style tag contains CSS styles that will be applied to the HTML table that will be generated later. In this case, a 2px blue border will be applied to each table data (td) element.
The body section contains an empty table element that will be populated later with data from the CSV file.
The script tag contains the JavaScript code that reads the CSV file and generates an HTML table from it.
The onload event handler is assigned to the window object. This event handler is executed when the HTML document has finished loading.
The fetch method is called with the relative path of the CSV file as its argument. This method returns a Promise that resolves with a Response object representing the CSV file.
The then method is called on the Promise returned by the fetch method. This method takes a function as its argument, which will be executed if the Promise is resolved. In this case, the function returns the CSV data as a text string.
The then method is called again on the Promise returned by the previous then method. This method takes a function as its argument, which will be executed if the Promise is resolved. In this case, the function parses the CSV data into a 2D array using the split method. The split method splits the CSV data by newlines and commas.
The map method is called on the resulting array. This method takes a function as its argument, which will be executed on each element of the array. In this case, the function maps each element to a table data (td) element wrapped in an HTML string.
The join method is called on the resulting array of HTML strings. This method concatenates the strings into a single string.
The forEach method is called on the 2D array resulting from the previous step. This method takes a function as its argument, which will be executed on each element of the array. In this case, the function generates a table row (tr) element, adds the concatenated HTML string from the previous step as its innerHTML, and appends the table row to the HTML table.
An if statement checks whether the innerText property of the newly generated table row is not empty. If it is not empty, the table row is appended to the HTML table. This check is performed to exclude empty rows that may exist in the CSV file.
The script tag is closed, followed by the body and HTML closing tags.