javascript - read csv file from a location and display as html table

Is there any way to get an HTML page to read a csv file from a particular destination and display it as an HTML table in the web page?

I am developing a web page to display the status of users that are logged in. Therefore the HTML page has to automatically read the csv file and display it in a web page accordingly, since the csv file will be updated periodically.

Edit:

Added the code as per suggestion from the answer, but nothing pops up in the browser

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>CSV Downloader</title>
</head>
<body>
<script src=".7.1/jquery.min.js"></script>
<script src=".1.2/papaparse.js"></script>
<script>
    function arrayToTable(tableData) {
        var table = $('<table></table>');
        $(tableData).each(function (i, rowData) {
            var row = $('<tr></tr>');
            $(rowData).each(function (j, cellData) {
                row.append($('<td>'+cellData+'</td>'));
            });
            table.append(row);
        });
        return table;
    }

    $.ajax({
        type: "GET",
        url: "C:\Users\tim tom\Desktop\csvTOhtml\data.csv",
        success: function (data) {
            $('body').append(arrayToTable(Papa.parse(data).data));
        }
    });
</script>
</body>

Is there any way to get an HTML page to read a csv file from a particular destination and display it as an HTML table in the web page?

Edit:

Added the code as per suggestion from the answer, but nothing pops up in the browser

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>CSV Downloader</title>
</head>
<body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/4.1.2/papaparse.js"></script>
<script>
    function arrayToTable(tableData) {
        var table = $('<table></table>');
        $(tableData).each(function (i, rowData) {
            var row = $('<tr></tr>');
            $(rowData).each(function (j, cellData) {
                row.append($('<td>'+cellData+'</td>'));
            });
            table.append(row);
        });
        return table;
    }

    $.ajax({
        type: "GET",
        url: "C:\Users\tim tom\Desktop\csvTOhtml\data.csv",
        success: function (data) {
            $('body').append(arrayToTable(Papa.parse(data).data));
        }
    });
</script>
</body>

Share Improve this question edited Mar 20, 2016 at 14:55 John Slegers 47.1k23 gold badges204 silver badges173 bronze badges asked Mar 19, 2016 at 16:19 ddpd 6031 gold badge13 silver badges25 bronze badges

See Papa Parse website for a csv parser. I'm not affiliated with them in any way. – R. Schifini Commented Mar 19, 2016 at 16:37
This question too broad in terms of: Questions asking us to recommend or find something... – isaias-b Commented Mar 19, 2016 at 17:53

Add a comment |

1 Answer 1

Sorted by: Reset to default 16

Three step process

You need three steps :

1) Use Ajax to fetch data from your server and turn it into an array. You could do this eg. with the following jQuery :

$.ajax({
    type: "GET",
    url: "data.csv",
    success: CSVToHTMLTable
});

2) Once you have get your CSV file, you need to parse it. An easy & reliable way to do it, would be to use a library like Papa Parse :

var data = Papa.parse(data).data;

3) You need to define a function to transform your array into an HTML table. Here's how you could do this with jQuery :

function arrayToTable(tableData) {
    var table = $('<table></table>');
    $(tableData).each(function (i, rowData) {
        var row = $('<tr></tr>');
        $(rowData).each(function (j, cellData) {
            row.append($('<td>'+cellData+'</td>'));
        });
        table.append(row);
    });
    return table;
}

Putting everything together

Here's how you can put everything together :

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/4.1.2/papaparse.js"></script>
<script>
    function arrayToTable(tableData) {
        var table = $('<table></table>');
        $(tableData).each(function (i, rowData) {
            var row = $('<tr></tr>');
            $(rowData).each(function (j, cellData) {
                row.append($('<td>'+cellData+'</td>'));
            });
            table.append(row);
        });
        return table;
    }

    $.ajax({
        type: "GET",
        url: "http://localhost/test/data.csv",
        success: function (data) {
            $('body').append(arrayToTable(Papa.parse(data).data));
        }
    });
</script>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - read csv file from a location and display as html table - Stack Overflow

1 Answer 1

Three step process

Putting everything together

与本文相关的文章

评论列表(0)