Solved

Help JQuery Datatable

Posted on 2015-01-18
13
412 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
Guide to Performance: Optimization & Monitoring

Nowadays, monitoring is a mixture of tools, systems, and codes—making it a very complex process. And with this complexity, comes variables for failure. Get DZone’s new Guide to Performance to learn how to proactively find these variables and solve them before a disruption occurs.

 
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 500 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

Monthly Recap

May was a big month for new releases from Linux Academy! Take a look at what our team built recently in our blog. You can access the newest releases from our blog.

Question has a verified solution.

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

This article will inform Clients about common and important expectations from the freelancers (Experts) who are looking at your Gig.
FAQ pages provide a simple way for you to supply and for customers to find answers to the most common questions about your company. Here are six reasons why your company website should have a FAQ page
This tutorial demonstrates how to identify and create boundary or building outlines in Google Maps. In this example, I outline the boundaries of an enclosed skatepark within a community park.  Login to your Google Account, then  Google for "Google M…
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…

705 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