nisarkhan
asked on
Help JQuery Datatable
So, here is my AJAX call for the DataTables object. I am trying to get the JSON to fill in a datatable with rows
I'm working on Jquery Datatables and trying to fetch the data and I'm getting the following error
"Uncaught TypeError: Cannot read property 'length' of undefined"
Here is the JSON i'm getting from: https://itunes.apple.com/search?term=apple ( i have tried with any other json data still getting the same error)
Here is AngularJS directive for Jquery Datatables:
https://gist.github.com/abuhamzah1/a0ca2d50aa5fdd6ef9d5
*! DataTables 1.10.2 */
<table id="test" ng-gridview="test" data-resource="$test" data-remote="https://itunes.apple.com/search?term=apple" >
<thead>
<tr>
<th data-name="collectionCenso redName" data-width="50">collection CensoredNa me</th>
<th data-name="trackCensoredNa me" data-width="75">trackCenso redName</t h>
<th data-name="trackCount" data-width="160">trackCoun t</th>
<th data-name="country" data-width="160">country</ th>
</tr>
</thead>
</table>
//resource:
userApp.factory('$test', function ($resource, $response, $path)
{
var $test = $resource('https://itunes.apple.com/search?term=apple', {});
return $test;
});
What I'm doing wrong here? any help?
I'm working on Jquery Datatables and trying to fetch the data and I'm getting the following error
"Uncaught TypeError: Cannot read property 'length' of undefined"
Here is the JSON i'm getting from: https://itunes.apple.com/search?term=apple ( i have tried with any other json data still getting the same error)
Here is AngularJS directive for Jquery Datatables:
https://gist.github.com/abuhamzah1/a0ca2d50aa5fdd6ef9d5
*! DataTables 1.10.2 */
<table id="test" ng-gridview="test" data-resource="$test" data-remote="https://itunes.apple.com/search?term=apple" >
<thead>
<tr>
<th data-name="collectionCenso
<th data-name="trackCensoredNa
<th data-name="trackCount" data-width="160">trackCoun
<th data-name="country" data-width="160">country</
</tr>
</thead>
</table>
//resource:
userApp.factory('$test', function ($resource, $response, $path)
{
var $test = $resource('https://itunes.apple.com/search?term=apple', {});
return $test;
});
What I'm doing wrong here? any help?
Phrase check that you're not getting any cross origin errors as Apple may not allow remote connections
ASKER
Hi Rob: I'm not getting any cross origin error and also I have plugin installed on my browser that enable cross domain (https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi)
so I'm not getting any error when i looked at the chrome browser except that this error "Uncaught TypeError: Cannot read property 'length' of undefined" which I believe its not related with cross domain
I have tried to use any json data i'm getting the same error it has nothing with json data and I believe my AngularJS directive is not doing what it suppose to do?
I have tried with this json link and getting the same error:
http://api.geonames.org/countryInfoJSON?username=design1online
Thanks again.
so I'm not getting any error when i looked at the chrome browser except that this error "Uncaught TypeError: Cannot read property 'length' of undefined" which I believe its not related with cross domain
I have tried to use any json data i'm getting the same error it has nothing with json data and I believe my AngularJS directive is not doing what it suppose to do?
I have tried with this json link and getting the same error:
http://api.geonames.org/countryInfoJSON?username=design1online
Thanks again.
Great debugging, makes my life easier and we just had to rule that out.
I'll set up a demo and see if we can get this working
I'll set up a demo and see if we can get this working
ASKER
Please remember to have datatables .js point and let me know if you need anything else....
http://cdn.datatables.net/1.10.2/
/css
//cdn.datatables.net/1.10. 2/css/jque ry.dataTab les.css
//cdn.datatables.net/1.10. 2/css/jque ry.dataTab les.min.cs s
//cdn.datatables.net/1.10. 2/css/jque ry.dataTab les_themer oller.css
js
//cdn.datatables.net/1.10. 2/js/jquer y.dataTabl es.js
//cdn.datatables.net/1.10. 2/js/jquer y.dataTabl es.min.js
http://cdn.datatables.net/1.10.2/
/css
//cdn.datatables.net/1.10.
//cdn.datatables.net/1.10.
//cdn.datatables.net/1.10.
js
//cdn.datatables.net/1.10.
//cdn.datatables.net/1.10.
What version of Angular are you using?
ASKER
1.2 ver angularjs
ASKER
I have created for you sample to have a look at here please
http://plnkr.co/edit/8lxlpF5o7u3bxGPT6xcS?p=preview
http://plnkr.co/edit/8lxlpF5o7u3bxGPT6xcS?p=preview
Angular aside, here is a demo of getting the data from that json: http://jsbin.com/hidana/1/edit?html,js,output
$(document).ready(function() {
var oTable = $('#test').dataTable({
"processing": true,
"ajax": {
url: "https://itunes.apple.com/search?term=apple",
dataSrc: "results"
},
"columns": [
{ "data": "kind" },
{"data": "wrapperType"},
{"data": "collectionId"},
{"data": "artistName"}
]
});
});
ASKER
Rob,
Can you try with the angularjs directive? I see the demo its able to fetch the data but if I used my angularjs directive its not.
Thanks for your time, much appreciate!
Can you try with the angularjs directive? I see the demo its able to fetch the data but if I used my angularjs directive its not.
Thanks for your time, much appreciate!
ASKER
Rob:
I put together this sample on Plunker please have a look at it
http://plnkr.co/edit/8t17QxtpLwigwmebxj3w?p=preview
I put together this sample on Plunker please have a look at it
http://plnkr.co/edit/8t17QxtpLwigwmebxj3w?p=preview
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Thanks leakim :)