[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 460
  • Last Modified:

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="collectionCensoredName" data-width="50">collectionCensoredName</th>
      <th data-name="trackCensoredName" data-width="75">trackCensoredName</th>
      <th data-name="trackCount" data-width="160">trackCount</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?
0
nisarkhan
Asked:
nisarkhan
  • 6
  • 5
  • 2
1 Solution
 
RobOwner (Aidellio)Commented:
Phrase check that you're not getting any cross origin errors as Apple may not allow remote connections
0
 
nisarkhanAuthor Commented:
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.
0
 
RobOwner (Aidellio)Commented:
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
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
nisarkhanAuthor Commented:
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/jquery.dataTables.css
//cdn.datatables.net/1.10.2/css/jquery.dataTables.min.css
//cdn.datatables.net/1.10.2/css/jquery.dataTables_themeroller.css
 
js
//cdn.datatables.net/1.10.2/js/jquery.dataTables.js
//cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js
0
 
RobOwner (Aidellio)Commented:
What version of Angular are you using?
0
 
nisarkhanAuthor Commented:
1.2 ver angularjs
0
 
nisarkhanAuthor Commented:
I have created for you sample to have a look at here please
http://plnkr.co/edit/8lxlpF5o7u3bxGPT6xcS?p=preview
0
 
RobOwner (Aidellio)Commented:
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"}
        ]
  });

});

Open in new window

0
 
nisarkhanAuthor Commented:
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!
0
 
nisarkhanAuthor Commented:
Rob:
I put together this sample on Plunker please have a look at it
http://plnkr.co/edit/8t17QxtpLwigwmebxj3w?p=preview
0
 
leakim971PluritechnicianCommented:
replace (we add a new line to inform the plugin what it the data field) :
                  settings = {
                    'data': scope[attrs.ngModel] || {},
by :
                  settings = {
                    sAjaxDataProp:"results",
                    'data': scope[attrs.ngModel] || {},
0
 
leakim971PluritechnicianCommented:
look fine
0
 
RobOwner (Aidellio)Commented:
Thanks leakim :)
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

  • 6
  • 5
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now