Search This Blog

Ads by Adsterra

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!

No comments:

Post a Comment