0

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?

Arrivedacci
  • 89
  • 2
  • 14

2 Answers2

2

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.

Taylor Caldwell
  • 381
  • 2
  • 7
0

I think I figured out how to parse the object from it. I was mistaken in that I thought I could do .query instead of .get since the api method returns an object.

Ex:

$http.get("https://na.api.pvp.net/api/lol/na/v1.4/summoner/585897?api_key=xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx").success(function(response_object)

After that, I just store the results in an array and I got my results.

Arrivedacci
  • 89
  • 2
  • 14
  • Correct, but your app will not be approved if you do this as your API key will be exposed. You will have to make all your calls server-side, as Rithm's stated in his answer. Best of luck! :) – Austin Sep 28 '15 at 14:54