AngularJS issue with getting external JSON

Question

Okay so I am new to AngularJS, and am trying to get data from an external API. The end result of this is basically going to help me understand angularjs, using external data, some more as well as getting some stats for Call Of Duty Ghosts for my account or others that I search for.

I know that $http.jsonp is the way to go, but the API doesn't really support it as well as CORS... I have accounted for that. I have been able to use jquery to test to make sure I can do it, but am unable to figure it out with AngularJS.

One issue I am having using whateverorigin and anyorigin from https://stackoverflow.com/a/7910570/1888585 and https://stackoverflow.com/a/6104416/1888585 is that I am getting http error 500 (Internal server error)

Without them I am getting an error regarding the json I am getting (which is valid json, checked with json linter) -> 'Uncaught SyntaxError: Unexpected token : '

So here is what I have:

<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body ng-controller="GhostsCtrl">
    <div id="text">
        Data from site: {{getGhostData()}}
        Data from site: {{info}}
    </div>

    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.15/angular.js"></script>

    <script>

        var myApp = angular.module('myApp', []);
        var ucdid = "3f0feb1229202d84b125bab79f7af503ce62057d499ecc0c";
        var network = "xbl";

        var url = "api.codcp.com/user_stats?ucdid="+ucdid+"&network="+network;
        var wrapURL = "http://anyorigin.com/get?url="+url+"&callback=?";
        var wrapURL4 = 'http://whateverorigin.org/get?url='+url+"&callback=?";
       //-----------
        myApp.service('dataService', function($http) {
           console.log("in service!!");
           this.getData = function() {
               console.log("http fn");
               resp = "test";
               // from here i get the syntax error
               $http.jsonp("http://"+url+"&callback=JSON_CALLBACK")
                       .success(function(data) {
                           console.log("Data gotten");
                           console.log(data.contents.user);
                           resp = "Success";
                       }).error(function(data ) {
                           console.log("error");
                           resp = "error";
                       });
               return resp;
           }
        });


        myApp.controller('GhostsCtrl', function($scope, $http, dataService){
            $scope.info = null;
            $scope.info = dataService.getData();

            $scope.getGhostData = function() {
                // from here I get the 500 error
                delete $http.defaults.headers.common['X-Requested-With'];
                $http.jsonp(wrapURL4).success(function(data) {
                    console.log("success: "+data.contents);
                    $scope.info = data.contents.user;
                }).error(function(data) {
                    console.log("error: " + data);
                });
            }

        });

    </script>
</body>
</html>

And for my jquery code that works just fine:

$.getJSON('http://anyorigin.com/dev/get?url=api.codcp.com/user_stats%3Fucdid%3D3f0feb1229202d84b125bab79f7af503ce62057d499ecc0c%26network%3Dxbl&callback=?', function(data){
        $.each(data.contents.user, function(val, idx) {
            $("#text span").append(val+" ");
        })
        console.log(data.contents.user);
    });

The json that comes back is as follows:

{"user":{"profile":{"ucdid":"3f0feb1229202d84b125bab79f7af503ce62057d499ecc0c","gamertag":"xNF6xVENGE","network":"xbl","image":"http://avatar.xboxlive.com/avatar/xNF6xVENGE/avatarpic-l.png","kdr":1.109316019930545,"winr":2.7632311977715878,"kill":14694,"deaths":13246,"wins":992,"losses":359,"hoursPlayed":147.32049180327868,"currentStreak":0,"preferredWeapon":"weapon.iw6_arx160"},"squadMember":{"gamertag":"Erskine","xp":1031872,"background":20,"patchbacking":0,"patch":"patch_590","level":57,"nextLevelXp":1070000,"nextLevel":58,"prevLevel":56,"prevLevelXp":1030000,"progress":0.0468,"prestige":6},"careerHistory":{"blackops2prestige":3,"mw3prestige":6,"nextreadblackops2":1405837382,"nextreadmw3":1405841587,"playedblackops2":true,"playedmw3":true},"accounts":["xbl","ucd"],"clan":{"teamId":34018,"name":"xATFWx","memberCount":24,"tag":"ATFW","motto":"Search & destroy ","mottoBg":22,"motd":"","stats":null,"entitlements":268435448,"cxp":1991990,"kdr":1.5,"winp":74,"chat_token":"a2236f048c2a5ab71473b6765909a7f88b8716782dff8fd7b1f9df43b4b2c00ad60ba1e1a47cbea0153f590b89b698de9b91e240a8427fae4a9d8d48ea10d4fe941ab40f62acca0497e3b9c39967621abb9d6c2863ac1935d4fc193b44e2bb19","clanLevel":25,"progress":1,"nextLevelXp":1991990,"cxpNeeded":0,"nextLevel":25,"membership":0,"invited":null}}}

If there is a way I can either call jquery from angularjs easily, or avoid either error I get would be great.

V31 · Accepted Answer · 2014-07-24 04:43:40Z

2

I created a fiddle to figure out what your problem may be and found out that your return statement was getting fired before parsing the data in the service. I have modified the service in order to return a callback and it will work fine.

Since I cannot mock your server request here is sample fiddle and code snippet

myApp.service('dataService', function($http) {
       console.log("in service!!");
   return {
    getData: function(callback) {
           console.log("http fn");
           resp = "test";
           // from here i get the syntax error
    var url = "http://public-api.wordpress.com/rest/v1/sites/wtmpeachtest.wordpress.com/posts?callback=JSON_CALLBACK";

    $http.jsonp(url)
        .success(function(data){
            console.log(data.found);
            resp="success";
            callback(resp);
        });
       }
     }
 });

answered Jul 24, 2014 at 4:43

V31

7,6643 gold badges28 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Vnge Over a year ago

It works in the fiddle, but I am having issues with the callback(resp) .... for me chrome is saying that "undefined is not a function" referirng to that line

V31 Over a year ago

Have you passed callback in getdata as an argument?

Vnge Over a year ago

I looked at the fiddle again, and realized i didn't pass a function

Anthony Chu · Accepted Answer · 2014-07-24 05:05:54Z

2

Looks like there are 2 reasons the anyorigin URL is not working.

The URL parameter needs to be properly encoded.
The callback should be JSON_CALLBACK instead of ?

Try this...

    var ucdid = "3f0feb1229202d84b125bab79f7af503ce62057d499ecc0c";
    var network = "xbl";

    var url = "api.codcp.com/user_stats?ucdid="+ucdid+"&network="+network;
    var wrapURL = "http://anyorigin.com/get?url=" + encodeURIComponent(url) +"&callback=JSON_CALLBACK";

This should build this URL which properly returns a JSONP response that can be consumed by angular:

http://anyorigin.com/get/?url=api.codcp.com%2Fuser_stats%3Fucdid%3D3f0feb1229202d84b125bab79f7af503ce62057d499ecc0c%26network%3Dxbl&callback=JSON_CALLBACK

See this Fiddle: Live Demo

answered Jul 24, 2014 at 5:05

Anthony Chu

37.6k10 gold badges85 silver badges72 bronze badges

1 Comment

Vnge Over a year ago

Would it be a good idea for me to return the http response, as return $http..... instead of returning the contents from the response. the reason why i use "success" and "error" for return responses was for testing

runTarm · Accepted Answer · 2014-07-24 04:40:36Z

1

The jQuery's $.getJSON() is not a jsonp, so if you are able to retrieve the data by $.getJSON(), you could also do it with a normal $http.get() (of course with the use of anyorigin.com).

It seems the api.codcp.com doesn't support JSONP, it response with a normal JSON regardless of a callback=? exists in a url or not.

answered Jul 24, 2014 at 4:40

runTarm

11.6k1 gold badge39 silver badges37 bronze badges

1 Comment

Vnge Over a year ago

Yeah that's what I found out as well

Ravindranath Akila · Accepted Answer · 2014-07-24 04:57:59Z

1

Fix this for starters, as it is just mixing single and double quote strings in concatenation:

        var wrapURL4 = 'http://whateverorigin.org/get?url='+url+"&callback=?";

By the way watch out. He is out there to get you !

Motto:

Search & destroy

and he's armed!

edited Jul 24, 2014 at 4:57

answered Jul 24, 2014 at 4:48

Ravindranath Akila

775 gold badges36 silver badges45 bronze badges

1 Comment

Vnge Over a year ago

Thanks, I missed the single and double quotes mixing, was typing too fast and trying different things

Jvil · Accepted Answer · 2014-10-01 18:18:43Z

0

If you have not figured out the jsonp callback in angularjs! here is something that helped me:

$http.jsonp("http://anywebsite.com/?json=get_recent_post&callback=JSON_CALLBACK")

I hope you find this helpful.

jv

answered Oct 1, 2014 at 18:18

Jvil

222 bronze badges

Collectives™ on Stack Overflow

AngularJS issue with getting external JSON

5 Answers 5

3 Comments

1 Comment

1 Comment

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

1 Comment

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related