Displaying CSV data into the table

Kalum

I am wondering if there is a way to display data from a .csv file. I am currently trying to convert it into JSON using jquery.csv:

        $.ajax({
            url: "data/test.csv",
            async: false,
            success: function (csvd) {
                var items = $.csv.toObjects(csvd);
                 jsonobject = JSON.stringify(items);
                 console.log(jsonobject)
            },
            dataType: "text",
            complete: function () {

Would anyone happen to have any further information on this?

kthorngren

You don't need to turn it into a JSON object. You will want to use it as Javascript data as described here:
https://datatables.net/manual/data/

You can either initialize the Datatable before your ajax call then use rows.add() in the success function to add the data. Or you can initialize Datatables in the success function and use data to supply the data to the Datatable. Looks like you will use the items varible for either of these option. I'm not sure what $.csv.toObjects(csvd) does and what structure items will be. You will need to verify that to configure Datatables to handle the structure.

Kevin

Kalum

Thanks for your response! I have managed to get a lot closer and load the CSV data into the table. But I keep getting the following error:

DataTables warning: table id=example - Requested unknown parameter '1' for row 108, column 1. For more information about this error, please see http://datatables.net/tn/4

I press "ok" twice and the data loads without an issue. I haven't been able to find a way to resolve this and I've looked over the documentation and other forums. I can see it being an issue with the way data is being loaded ( https://imgur.com/2cydgqj ), any ideas?

tangerine

The error suggests that row 108 in your data is incomplete. Have you checked it?

Kalum

After checking the data, it seems fine, I tried with another csv and that gives an error on '1' for row 227, column 1

I even just downloaded a set of mock data from google, that gives the following:
DataTables warning: table id=example - Requested unknown parameter '6' for row 0, column 6. For more information about this error, please see http://datatables.net/tn/4

kthorngren

Without actually seeing the data its hard to say what the problem is. You will need to look at array element 108 for example to see what is actually in that array element. Take a look at 107 too because it probably starts counting from 0. Maybe post array elements 105 through 110 here along with your Datatables initialization code.

Kevin

Kalum

I have changed the data to data from a mock up website so I can show you it ( http://rythm.online/ecenuzocad.rb ) This is all fake data.

It gives this error:
DataTables warning: table id=example - Requested unknown parameter '1' for row 1001, column 1

kthorngren

That's the CSV file. You have this code:

    success: function (csvd) {
        var items = $.csv.toObjects(csvd);
         jsonobject = JSON.stringify(items);
         console.log(jsonobject)
    },

We are more interested in what jsonobject contains. I'm guessing that is the data you are giving to Datatables. Whatever your are giving to Datatables is what we need to see. Plus please post your Datatables init code.

Kevin

kthorngren

Actually looking at it a bit closer you have a blank line at the end of the CSV file:

I would guess that $.csv.toObjects() is adding a blank array element to var items. Take a look at your console output for the last element. Is it blank? If so then you will need to write code to remove the blank data or return a CSV file that doesn't have a blank line.

Kevin

Kalum

As an update, that is no longer my code. My code is now this:

  $(function() {
        Papa.parse("data/mock_data.csv", {
            download: true,
            complete: function(example) {
                console.log(example.data)
            $(document).ready(function () {
                $('#example').DataTable({
                    data: example.data,
                    dataSrc:"",
                    columns: [
                        {title: "id"},
                        {title: "first_name"},
                        {title: "last_name"},
                        {title: "email"},
                        {title: "gender"},
                        {title: "ip_address"}
                    ]
                });
            });
            }
        });
    });

I'll look into the blank line.

Kalum

So it was the blank line that was causing the issue! Thank you very much for your help, both of you