如何從CSV文件中提取數據並用它填充HTML表？

Question

因此，我也看到了類似的問題，但是我一直無法獲得有效的答案。 每天都有公司將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');
            });

        });

Answer 1

我可以通過更改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>