Link to home
Start Free TrialLog in
Avatar of nisarkhan
nisarkhanFlag for United States of America

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="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?
Avatar of Rob
Rob
Flag of Australia image

Phrase check that you're not getting any cross origin errors as Apple may not allow remote connections
Avatar of nisarkhan

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.
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
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
What version of Angular are you using?
1.2 ver angularjs
I have created for you sample to have a look at here please
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"}
        ]
  });

});

Open in new window

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!
Rob:
I put together this sample on Plunker please have a look at it
http://plnkr.co/edit/8t17QxtpLwigwmebxj3w?p=preview
ASKER CERTIFIED SOLUTION
Avatar of leakim971
leakim971
Flag of Guadeloupe image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Thanks leakim :)