(Riot-API)使用angularJS

时间:2015-08-24 20:40:31

标签: javascript angularjs riot-games-api

我使用angularjs来检索召唤者信息,但仅检索特定字段(例如,仅召唤者名称,仅限id)。如果我得到了正确的结果,我试图使用console.log()进行检查。但是,我一直在控制台屏幕上显示:

错误:[$ resource:badcfg] http://errors.angularjs.org/1.4.4/ $ resource / badcfg?p0 = query& p1 = array& p2 = obj ... 2Fna.api.pvp.net%2Fapi%2Flol%2Fna%2Fv1.4 %2Fsummoner%2Fby名称%2Fsummoner名     在错误(本机)     在http://localhost/riotapi_project/angularjs/angular.min.js:6:416     在d.module.provider。$ get.e。(匿名函数).q.then.p。$ resolved(http://localhost/riotapi_project/angularjs/angular-resource.min.js:9:330)     在http://localhost/riotapi_project/angularjs/angular.min.js:118:217     at n。$ get.n. $ eval(http://localhost/riotapi_project/angularjs/angular.min.js:133:39)     at n。$ get.n. $ digest(http://localhost/riotapi_project/angularjs/angular.min.js:130:60)     at n。$ get.n. $ apply(http://localhost/riotapi_project/angularjs/angular.min.js:133:330)     at g(http://localhost/riotapi_project/angularjs/angular.min.js:87:340)     在K(http://localhost/riotapi_project/angularjs/angular.min.js:91:406)     在XMLHttpRequest.A.onload(http://localhost/riotapi_project/angularjs/angular.min.js:92:437

这是我的代码: 的的index.html ////////////////////////////////////////////////// ////////////////////////////////////////////////// ///////////////////////////



<!doctype html>
<html lang="en" ng-app="riotApiApp">
<head>
  <meta charset="utf-8">
  <title>Angular JS Controller</title>
  <script src="angularjs/angular.min.js"></script>
  <script src="angularjs/angular-resource.min.js"></script>
  <script src="api_call.js"></script>
</head>
<!-- <body ng-controller="getSummonerbyName"> -->
<body>
<div ng-controller="getSummonerbyName">
	First Name: <input type="text" ng-model="summonerName"><br>
	  <ul ng-repeat="post in posts">
		<li>
			{{post}}
		</li>
		<!-- <div ng-controller="alternateSummonerRetrieve"> ng-model={{post.id}}></div> -->
	  </ul>
</div>


</body>
</html>
&#13;
&#13;
&#13;

/////////////////////////////////////////////// ////////////////////////////////////////////////// //////////////////////////////

api_call.js

/////////////////////////////////////////////// ////////////////////////////////////////////////// //////////////////////////////

&#13;
&#13;
var riotApiApp = angular.module('riotApiApp', ['ngResource']);

riotApiApp.controller('getSummonerbyName', function($scope, $http, $resource) {
	
	$scope.$watch('summonerName', function (tmpStr) {
		if (!tmpStr || tmpStr.length == 0)
			return 0;
		setTimeout(function() {

			if (tmpStr === $scope.summonerName)
			{	
				var src = $resource('https://na.api.pvp.net/api/lol/na/v1.4/summoner/by-name/:verb', {verb:$scope.summonerName, api_key:xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxxx'}, {retrieve: {method: 'GET', isArray: true}});
				var user = src.query({}, function() {
					
				});
				console.log(user);

			}
		}, 1000);
	});
&#13;
&#13;
&#13;

/////////////////////////////////////////////// ////////////////////////////////////////////////// //////////////////////////////

谁能告诉我我做错了什么?

2 个答案:

答案 0 :(得分:2)

您不应该使用像AngularJS这样的前端框架来调用Riot Games API,因为这会向您的用户公开您的API密钥。

您需要在服务器端调用Riot Games API,并让您的客户端从服务器请求数据。

答案 1 :(得分:0)

我想我想出了如何从中解析对象。我错了,我认为我可以做.query而不是.get,因为api方法返回一个对象。

例如:

$ http.get( “https://na.api.pvp.net/api/lol/na/v1.4/summoner/585897?api_key=xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx”)。成功(函数(response_object)

之后,我只是将结果存储在一个数组中,然后得到了我的结果。