Search This Blog

Ads by Adsterra

Read CSV Files Data in HTML Table using JavaScript Fetch Method | CSV to HTML | JS | CSV File Reader

In Today's video I will be showing you how we can fetch csv file data to display in HTML table.

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>

No comments:

Post a Comment