CODEWITHSUNDEEP
javascriptjqueryjsonangularjsjsonp
Vnge
Vnge

Reputation: 1305

AngularJS issue with getting external JSON

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.

Upvotes: 0

Views: 1728

Answers (5)

Jvil
Jvil

Reputation: 22

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

Upvotes: 0

Anthony Chu
Anthony Chu

Reputation: 37560

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

  1. The URL parameter needs to be properly encoded.
  2. 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

Upvotes: 2

Ravindranath Akila
Ravindranath Akila

Reputation: 47

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!

Upvotes: 1

V31
V31

Reputation: 7666

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

Upvotes: 2

runTarm
runTarm

Reputation: 11547

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.

Upvotes: 1

Related Questions