Cannot read property 'length' of undefined w/AJAX datasource

FreakinWard

I have read through the forum questions but none seem to help out in this instance.

I am using a json object data source and the basic configuration, very basic. I am able to see the ajax call hit the restful service. However, the error that is logged in the console is as follows: Cannot read property 'length' of undefined

What might I be missing here?

Here is my return json object:

[
  {
    "fileName": "fLvmBvnpoUGbMCzCbs5z1w.jpg",
    "originalFileName": "Jellyfish",
    "originalFileNameComplete": "Jellyfish.jpg",
    "code": "fLvmBvnpoUGbMCzCbs5z1w",
    "extension": ".jpg",
    "clientCode": "VFR",
    "websiteId": 7,
    "usage": "Content",
    "description": "A really groovy description"
  },
  {
    "fileName": "jY6G2g97UEWhvQZ-79G7Xg.jpg",
    "originalFileName": "Ostrich",
    "originalFileNameComplete": "Ostrich.jpg",
    "code": "jY6G2g97UEWhvQZ-79G7Xg",
    "extension": ".jpg",
    "clientCode": "VFR",
    "websiteId": 7,
    "usage": "Content",
    "description": ""
  }
]

My HTML is as follows:

<table id="graphicResults" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Original Name</th>
                <th>Usage</th>
                <th>Usage</th>
                <th>Description</th>
            </tr>
        </thead>
    </table>

Here is the client side js:

$(document).ready(function () {

            $('#graphicResults').dataTable({
                "ajax": cdnUrl + "images/" + websiteId,
                "columns": [
                    { "data": "fileName" },
                    { "data": "originalFileNameComplete" },
                    { "data": "usage" },
                    { "data": "description" }
                ]
            });

        });

tangerine

5 HTML columns, 4 JS columns. They have to match.

allan

Also you need to use ajax.dataSrc and set it to be an empty string if your Ajax feed is just returning an array of data.

Allan

FreakinWard

I really appreciate the feedback. However, neither solution seems to work. I am still getting the same error.

What else might I be missing? I'm just not sure how the control itself works, so I'm unsure on what it's trying to get a length of.

I updated the HTML to:

<table id="graphicResults" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Original Name</th>
                <th>Usage</th>>
                <th>Description</th>
            </tr>
        </thead>
    </table>

And I updated the javascript to:

$('#graphicResults').dataTable({
                "ajax": cdnUrl + "images/" + websiteId,
                "ajax.dataSrc": "",
                "columns": [
                    { "data": "fileName" },
                    { "data": "originalFileNameComplete" },
                    { "data": "usage" },
                    { "data": "description" }
                ]
            });

allan

"ajax.dataSrc": "",

That won't work. If you click the documentation link I gave above you will see examples such as:

$('#example').dataTable( {
  "ajax": {
    "url": "data.json",
    "dataSrc": ""
  }
} );

Allan

FreakinWard

Allen, I misunderstood the implementation of your instructions.

Thank you! This has solved the problem.