AngularJS JSONデータを表示

Question

私はAngularJSを学んでおり、プロジェクトの構造を設定していますが、JSONを返すAPIを呼び出すと、htmlに表示できません。

ボタンをクリックすると、結果は{{answer}}に表示されます。

HTML：

<div ng-app="xileapp"> 
    <div ng-controller="searchController"> 
     <input type="button" ng-click="search()" value="search" /> 
     <div>Answer: {{answer}}</div> 
    </div> 
</div> 

コントローラー：

xile.controller('searchController', ['personSearch', '$scope', function (personSearch, $scope) { 

    $scope.search = function() { 

     $scope.answer = personSearch.findPlayer(); 

    } 

}]); 

サービス：

xile.service('personSearch', function ($http) { 



    this.findPlayer = function() { 

     $http({ 
     method: 'GET', 
     url: 'https://euw.api.pvp.net/api/lol/euw/v1.4/summoner/by-name/Crucify?api_key=222015c4-0898-4f6b-a7d5-2a23c3e0344d' 
      }).then(function successCallback(response) { 
      // this callback will be called asynchronously 
      // when the response is available 
      return response; 

      }, function errorCallback(response) { 
      // called asynchronously if an error occurs 
      // or server returns response with an error status. 
      return response; 

     }); 

    }; 

}); 

URLが正しい応答を成功に当たっています。データをHTMLに表示するにはどうしたらいいですか？

Answer 1

findPlayerは何も返さないので、あなたは（実際にundefinedを割り当てる）answerに任意のデータを代入されていません。

だから、最初にすべての、あなたはサービスメソッドの戻り約束オブジェクトを作成する必要があります。

this.findPlayer = function() { 

    var url = 'https://euw.api.pvp.net/api/lol/euw/v1.4/summoner/by-name/Crucify?api_key=222015c4-0898-4f6b-a7d5-2a23c3e0344d'; 

    return $http({ 
     method: 'GET', 
     url: url 
    }).then(function successCallback(response) { 
     // this callback will be called asynchronously 
     // when the response is available 
     return response.data; 
    }, function errorCallback(response) { 
     // called asynchronously if an error occurs 
     // or server returns response with an error status. 
     return response; 
    }); 
}; 

は、コントローラにそれを消費：

$scope.search = function() { 
    personSearch.findPlayer().then(function(data) { 
     $scope.answer = data; 
    }); 
} 

Answer 2

Angularには、jsonを戻すと実際のバインディング式に追加できるJsonフィルタがあります。

{{ answer | json }} 

あなたが応答から実際のJSONをしたい場合は、レスポンスオブジェクトのプロパティdataでそれを見つけることができます。

response.data 

改善提案：

私はそれがなく、スローされます例外を処理しますので、私はその実際より良いと思うあなたhttp getメソッドは「立派」短い手をも提供してきましたあなたのケースでエラーコールバックを使用します。

return $http.get(apiUrl) 
      .then(successCB) 
      .catch(errorCB); 

Answer 3

このJSONオブジェクトをログに記録し、必要proportyを把握してください表示

{answer: "a"} 

次に

<div>Answer: {{answer.answer}}</div> 

となるとfindPlayer関数からデータを返すか、