Ajax loading

drawnitsud

So, I have poured over the manual and googled extensively and I don't know what I am missing here. I am trying to load my data through an ajax call and I keep getting: Cannot read property 'mData' of undefined

My ajax call returns an object and when I console.log it, the structure looks like this:

[Object, Object]
0: Object
     formattedCreated: "1/15/2016"
     id: 50
     subject: "Meter"
1: Object
     formattedCreated: "1/16/2016"
     id: 51
     subject: "Second"

Okay, so its an array of objects basically. I cannot figure- for the life of me- the call. I've tried several.

JavaScript: 
$("#my_table").DataTable({
        "ajax": "path/of/call",
         "columns": [
                {"data": "formattedCreated"}
                {"data": "subject"}
                {"data": null} (I don't want to use id)
         ]
});

HTML: 
table id="my_table"
   thead
      tr
         th Date /th
         th Subject /th
         th a href="" i class="fa fa-icon" /i /a /th
      /tr
    /thead
/table

I've tried many variances of the JavaScript but cannot seem to get it to work. Any help would be MUCH appreciated

DirceuNazareth

Based on the piece of console that you showed about your ajax response... It looks your JSON structure is missing the "data" identifier
Your object should console:
Object {data: Array[2]} instead of [Object, Object].

So, you have two options:
1) change the response to be:
{ data: [ { formattedCreated: "1/15/2016", id: 50, subject: "Meter" }, { formattedCreated: "1/16/2016" id: 51 subject: "Second" } ] }

You can use "dataSrc" property to see how dataTable is seeing the data.

2) And also you can try the code below since looks your data is ready to be used (already outside of the "data" identifier).

JavaScript:
$("#my_table").DataTable({ "ajax": { url: "path/of/call", dataSrc: function (data, settings) { console.log(data); return data; } }, "columns": [ {"data": "formattedCreated"} {"data": "subject"} {"data": null} (I don't want to use id) ] });