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.

score 2 · Accepted Answer · answered Jul 24 '14 at 04:43

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);
        });
       }
     }
 });

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 — Vnge, Jul 24 '14 at 08:01
I looked at the fiddle again, and realized i didn't pass a function — Vnge, Jul 24 '14 at 08:11

score 2 · Answer 2 · answered Jul 24 '14 at 05:05

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

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 — Vnge, Jul 24 '14 at 07:52

score 1 · Answer 3 · answered Jul 24 '14 at 04:40

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 '14 at 04:40

runTarm

11,537
1
37
37

Yeah that's what I found out as well – Vnge Jul 24 '14 at 07:39

Ravindranath Akila · Answer 4 · 2014-07-24T04:57:59.937

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 '14 at 04:57

answered Jul 24 '14 at 04:48

Ravindranath Akila

209
3
35
45

Thanks, I missed the single and double quotes mixing, was typing too fast and trying different things – Vnge Jul 24 '14 at 07:52

score 0 · Answer 5 · answered Oct 01 '14 at 18:18

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 01 '14 at 18:18

Jvil

22
1

AngularJS issue with getting external JSON

5 Answers5