I'm using angularjs to retrieve summoner info but only a specific field (e.g. summoner name only, id only). I'm trying to check using console.log() if I'm getting the correct results. However, I keep getting this on the console screen:
Error: [$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-name%2Fsummoner-name at Error (native) at http://localhost/riotapi_project/angularjs/angular.min.js:6:416 at d.module.provider.$get.e.(anonymous function).q.then.p.$resolved (http://localhost/riotapi_project/angularjs/angular-resource.min.js:9:330) at 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) at K (http://localhost/riotapi_project/angularjs/angular.min.js:91:406) at XMLHttpRequest.A.onload (http://localhost/riotapi_project/angularjs/angular.min.js:92:437)
This is my code: 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>///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
api_call.js
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
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);
});///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
Can anyone tell me what I'm doing wrong?
You shouldn't use a front-end framework like AngularJS to make calls to the Riot Games API, as this exposes your API key to your users.
You will want to make calls to the Riot Games API on the server side, and have your client request the data from the server.