?
Solved

Help JQuery Datatable

Posted on 2015-01-18
13
Medium Priority
?
440 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
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 82

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 82

Expert Comment

by:leakim971
ID: 40568244
look fine
0
 
LVL 43

Expert Comment

by:Rob
ID: 40571435
Thanks leakim :)
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Australian government abolished Visa 457 earlier this April and this article describes how this decision might affect Australian IT scene and IT experts.
When it comes to security, close monitoring is a must. According to WhiteHat Security annual report, a substantial number of all web applications are vulnerable always. Monitis offers a new product - fully-featured Website security monitoring and pr…
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

762 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