Question

好的，所以我是AngularJS的新手，我正在尝试从外部API获取数据。这样做的最终结果基本上是帮助我理解angularjs，使用外部数据，更多，以及为我的帐户或我搜索的其他人获取一些Call of Duty Ghosts的统计数据。

我知道$ http.jsonp是要走的路，但API并没有真正支持它以及CORS ......我已经解释了这一点。我已经能够使用jquery进行测试以确保我能够做到，但我无法用AngularJS来解决它。

我使用来自https://stackoverflow.com/a/7910570/1888585和https://stackoverflow.com/a/6104416/1888585的anyorigin和anyorigin的一个问题是我收到http错误500（内部服务器错误）

没有他们我得到一个关于我得到的json的错误（这是有效的json，用json linter检查） - ＆gt; ＆＃39; Uncaught SyntaxError：意外的令牌：＆＃39;

所以这就是我所拥有的：

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

我的jquery代码运行得很好：

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

回来的json如下：

{"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}}}

如果有办法我可以轻松地从angularjs调用jquery，或者避免任何错误，我会得到很好的。

Answer 1

我创建了一个小提琴来弄清楚你的问题是什么，并发现你的return语句在解析服务中的数据之前就被解雇了。我已修改服务以返回回调，它将正常工作。

由于我无法模拟您的服务器请求，因此示例fiddle和代码段

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

Answer 2

看起来有任何原因导致anyorigin网址无效。

需要正确编码URL参数。
回调应该是JSON_CALLBACK而不是?

试试这个......

    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";

这应构建此URL，以正确返回可由angular：

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

请参阅此小提琴：Live Demo

Answer 3

jQuery的$.getJSON()不是jsonp，所以如果你能够通过$.getJSON()检索数据，你也可以使用正常$http.get()（当然使用anyorigin.com）。

似乎api.codcp.com不支持JSONP，无论网址中是否存在callback=?，它都会使用正常的JSON进行响应。

Answer 4

为初学者修复此问题，因为它只是在串联中混合单引号和双引号字符串：

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

顺便提一下。 He is 在那里找你！

训：

搜索＆amp;毁灭

他武装起来了！

Answer 5

如果你还没有想出angularjs中的jsonp回调！这是帮助我的东西：

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

我希望你觉得这很有用。

JV

AngularJS获取外部JSON的问题

5 个答案: