How can I import local csv files using javascript to create html table?-CodePudding

I have a python program which creates csv files from dataframes. I want to create html tables using the csv files stored locally by importing them using javascript. I have the following code snippet but it's not working and showing only blank screen on the html page-

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        table {
            border-collapse: collapse;
            border: 2px black solid;
            font: 12px sans-serif;
        }

        td {
            border: 1px black solid;
            padding: 5px;
        }
    </style>
</head>
<body>
    <!-- <script src="http://d3js.org/d3.v3.min.js"></script> -->
    <script src="d3.min.js?v=3.2.8"></script>

    <script type="text/javascript"charset="utf-8">
        d3.text("C:\Users\hp\Documents\Atom\airlines_final.csv", function(data) {
            var parsedCSV = d3.csv.parseRows(data);

            var container = d3.select("body")
                .append("table")

                .selectAll("tr")
                    .data(parsedCSV).enter()
                    .append("tr")

                .selectAll("td")
                    .data(function(d) { return d; }).enter()
                    .append("td")
                    .text(function(d) { return d; });
        });
    </script>
</body>
</html>

Can anyone please tell me what I'm doing wrong or guide me to the correct code I can use?

CodePudding user response：

You cannot access local files through your browser as that would be a glaring security vulnerability. However you can select files with a input, then access that selected file. See this example to solve your problem.

CodePudding user response：

welcome to the stack! There are a few things you should try:

Look in your internet browser's 'console' to see if there are any errors.
Check the file permissions and existence of the file.
How you are importing d3 looks suspicious. To eliminate this as the cause of error, uncomment the first import, comment out the second.

After steps 2 & 3 retry step 1.