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>

Useful Links

How to read csv data in html table using Javascript ( JS )

In today's video, I'm going to show you how to read or display CSV Files in an HTML table using JavaScript.

Hope This Video Will Help You.

Free Source code to read csv files in html table using javascript.

Save this html and name it to "csv-file-reader.html" or anything what you want.


<!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>csv file reader</title>
    <style>
        td {
            border: 2px solid maroon;
        }
    </style>
</head>
<body>
    <!-- tutorial link : https://www.youtube.com/watch?v=BQfK1QKCHys&t=326s -->
    <input type="file">
    <table></table>
    <script src="./csv.js"></script>
</body>
</html>

Copy and Save the below script file giving a name "csv.js"


        const x = document.querySelector("input");
        x.addEventListener("change", () => {
            const fr = new FileReader();
            fr.onloadend = e => {
                let r = fr.result.split("\n").map(e => {
                    return e.split(",");
                });
                r.forEach(e => {
                    let m = e.map(e => {
                        return `${e}`;
                    }).join("");
                    const ce = document.createElement("tr");
                    ce.innerHTML = m;

                    if (ce.innerText !== "") {
                        document.querySelector("table").append(ce);

                    }


                });

                // console.log(r)
            }
            fr.readAsText(x.files[0]);

        })

You are done!

Useful Links

Subscribe to: Posts (Atom)