?
Solved

Help JQuery Datatable

Posted on 2015-01-18
13
Medium Priority
?
474 Views
Last Modified: 2015-01-26
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
Comment
Question by:nisarkhan
  • 6
  • 5
  • 2
13 Comments
 
LVL 43

Expert Comment

by:Rob
ID: 40556876
Phrase check that you're not getting any cross origin errors as Apple may not allow remote connections
0
 
LVL 7

Author Comment

by:nisarkhan
ID: 40556880
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
 
LVL 43

Expert Comment

by:Rob
ID: 40556924
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
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
LVL 7

Author Comment

by:nisarkhan
ID: 40556948
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
 
LVL 43

Expert Comment

by:Rob
ID: 40556970
What version of Angular are you using?
0
 
LVL 7

Author Comment

by:nisarkhan
ID: 40557586
1.2 ver angularjs
0
 
LVL 7

Author Comment

by:nisarkhan
ID: 40558483
I have created for you sample to have a look at here please
http://plnkr.co/edit/8lxlpF5o7u3bxGPT6xcS?p=preview
0
 
LVL 43

Expert Comment

by:Rob
ID: 40558816
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
 
LVL 7

Author Comment

by:nisarkhan
ID: 40558885
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
 
LVL 7

Author Comment

by:nisarkhan
ID: 40567764
Rob:
I put together this sample on Plunker please have a look at it
http://plnkr.co/edit/8t17QxtpLwigwmebxj3w?p=preview
0
 
LVL 83

Accepted Solution

by:
leakim971 earned 2000 total points
ID: 40568243
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
 
LVL 83

Expert Comment

by:leakim971
ID: 40568244
look fine
0
 
LVL 43

Expert Comment

by:Rob
ID: 40571435
Thanks leakim :)
0

Featured Post

The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

How do you create a user-centered user experience on your website? And what are some things you should consider in the process?
Why WooCommerce is one of the majorly favored choices when it comes to having an eCommerce store. This article will acquaint you with some reasons that I believe make it one of the best eCommerce platforms available.
The viewer will learn how to count occurrences of each item in an array.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
Suggested Courses

601 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question