如何从CSV文件中提取数据并将其填充到HTML表中？

Question

如何从CSV文件中提取数据并将其填充到HTML表中？

4

所以，我看到了类似的问题，但我没有得到一个可行的答案。每天，一家公司都会将一个文件FTP到我们的服务器上。我们已经知道文件名和它在服务器上的位置。我们的工作是将数据插入到HTML表格中。插入数据很容易，问题在于获取数据。如果我能够获得整个CSV文件（它只有4个值）作为字符串，我就可以使用正则表达式来完成它。

我尝试使用AJAX进行XMLHTTPRequest，然后使用responseText获取数据作为字符串。但是，我没有成功，我尝试使用JQuery来获取它。这是我的代码，但我总是在控制台中记录“发生错误”。我想也许它无法处理csv文件。此外，file.csv目前与index.aspx在同一个目录中，因此您在代码中看到的是文件路径。由于文件每天都会更新，所以我们不想缓存该文件。感谢您的帮助。

注意：下面的代码已经被纠正。如果您有类似的问题，这段代码应该适用于您。请确保仔细检查您的文件路径，并且不要在$.ajax块中使用“dataType：type”。

 // Wait for the DOM to be ready
        $(document).ready(function() {
            // Use JQuery promises to make AJAX XMLHttpRequest
            promise = $.ajax({
                type:"GET",
                url:"file.csv",
                cache:false
            });

            // Run script when file is ready
            promise.done(function(data){
                console.log(data);

                // Table IDs represented as an array
                var ids = ['date', 'fund', 'change', 'points'];

                // Update table
                for (var x = 0; x < ids.length; x++) {
                    document.getElementById(ids[x]).innerHTML = data[x];
                }
            });

            // Run script if request fails
            promise.fail(function() {
                console.log('A failure ocurred');
            });

        });

- Joseph Bergman

由于您的URL是相对路径（即“ file.csv”），您是否检查过它不仅仅是简单的404错误？路径可能只是错误的？在浏览器开发工具的网络选项卡中，检查您正在向file.csv发出的请求的完整详细信息。暂时将javascript剪切出来，直接导航到该CSV并确保路径正确。 - user1017882

我认为jQuery没有CSV解析器... - Frogmouth

1

"dataType: 'text/csv'" 是错误的。你需要使用 "dataType: 'text'"。 - Frogmouth

dataType 应该是：xml，script，html，json，jsonp 或 text，或者两者混合，如 text xml 等... 仅限于这些。请参考此处：http://api.jquery.com/jquery.ajax/。 - Frogmouth

1

为了让您了解，由.fail()方法调用的函数有3个属性：jqXHR.fail(function( jqXHR, textStatus, errorThrown ) {});，这些属性可以帮助您调试请求。对于像dataType一样的text/csv，属性textStatus是parsererror。 - Frogmouth

显示剩余4条评论

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Sean Wessell · Accepted Answer

通过将dataType更改为“text”，我成功地使其工作。

还包括解析csv文件的代码。

$(document).ready(function() {

    promise = $.ajax({
        type:"GET",
        dataType:"text",
        url:"file.csv",
        cache:false
    });

    promise.done(function(data){

        //Parse CSV File
        //split on new line
        var dataArr = data.split("\n");

        //for each line in array
        $.each(dataArr,function(){
            if (this != "") {

                //split files and create row
                var row = new String("");
                valArr = this.split(",");
                    row += "<tr>"

                $.each(valArr, function(){
                    row += "<td>" + this +"</td>"
                });     

                    row += "</tr>"

                    //Add row to table
                    $('tbody').append(row);

            }

        });

    });

    // Run script if request fails
    promise.fail(function() {
       console.log('A failure ocurred');
    });

});

HTML:

<table class="table table-hover">
    <thead>
        <tr>
            <th>Date</th>
            <th>Fund</th>
            <th>Change</th>
            <th>Points</th>
        </tr>
    </thead>
    <tbody>

    </tbody>
</table>

enter image description here