Cannot read property 'length' of undefined w/AJAX datasource
Cannot read property 'length' of undefined w/AJAX datasource
FreakinWard
Posts: 3Questions: 1Answers: 0
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" }
]
});
});
This discussion has been closed.
Answers
5 HTML columns, 4 JS columns. They have to match.
Also you need to use
ajax.dataSrcand set it to be an empty string if your Ajax feed is just returning an array of data.Allan
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:
And I updated the javascript to:
That won't work. If you click the documentation link I gave above you will see examples such as:
Allan
Allen, I misunderstood the implementation of your instructions.
Thank you! This has solved the problem.