How can I pull data from a CSV file and populate an HTML table with it?

Question

So, I have seen similar questions, but I haven't been able to get a working answer. Everyday a company is going to FTP a file to our server. We already know the file name and where it will go on the server. Our job is to take the data and insert it into an HTML table. Inserting the data is the easy part, it's getting the data that has been the problem. If I can just get the entire CSV file (it only has 4 values) as a string, I would be able to do it using regex.

I tried to make an XMLHTTPRequest with AJAX, and then use responseText to get the data as the string. After having no luck there, I tried to use JQuery to get it. This is my code, but I always get 'An error occurred' logged to the console. I am thinking maybe it just can't process the csv file. Also, file.csv is in the same directory as index.aspx right now, hence the file path you see in the code. We don't want to cache the file since it gets updated daily. Thanks for your help.

NOTE: The code below has been corrected. If you have a similar problem, this code should work for you. Make sure you double check your file path and do not use 'dataType: type' in the $.ajax block.

 // 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

I was able to get it working by changing the dataType:"text".

Also included the code to parse the csv file.

$(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>