Bonjour, j'étudie l'API League of legends (https://developer.riotgames.com/api/methods) pour le fun ^^ avec angular js
Donc j'ai pas de but précis mise à part m'amuser a découvrir l'API et approfondir mes connaissance sur AngularJs.
Donc j'ai fait un petit formulaire pour récupérer les données recherché par l'utilisateur via :
- son summoner name (ng-model = "summoner")
- sa region (ng-model = "region")
Jusqu'ici tout fonctionne je récupère bien mon Json et les données voulus.
exemple :
xander18 = le summoner que j'ai entrer (soit mon nom d'invocateur in-game)
{"xander18":{"id":24566960,"name":"xander18","profileIconId":606,"summonerLevel":30,"revisionDate":1398858716000}}
Mon problème surviens au moment ou je veut afficher mes données, le json récupérer est un objet du summoner name entrer(xander18) et donc si j'essaye de les afficher en faisant
id : {{result.summoner.id}}
name : {{result.summoner.name}}
sa me récupère rien =s, j'ai essayé {{result.{{summoner}}.name}} mais sa m'envois une erreur direct
edit : après quelque recherche si je met id : {{result.xander18.id}} sa me retourne bien l'id alors sachant que $scope.summoner = "xander18"; pourquoi {{result.summoner.id}} ne m'affiche rien
des idées de comment je pourrais résoudre se problème ?
merci
5 réponses
Le problème ici est que l'API de LoL te renvoie un objet indicé par le nom d'invocateur.
Tu pourrais résoudre partiellement ton problème en faisant :
<p> id : {{ result[summoner].id }}</p>MAIS , comme dit dans la doc, les noms d'invocateurs reçus sont "standardisés" --> suppression des espaces et des majuscules.
Du coup tu ne pourrais pas accéder directement à ton invocateur comme ci dessus si son nom contient des espaces etc...
Ce que tu peux faire est transformer la réponse pour qu'elle devienne directement l'invocateur et pas l'objet le contenant :
$scope.result = (function (reponse) {
var out;
angular.forEach(response, function (res) {
out = res;
});
return out;
})(response);et du coup dans ton html :
<p>id : {{result.id}}</p>Hello,
peux tu poster l'erreur que tu as ?
accessoirement, fais toi un
console.log(result)comme ca tu pourras inspecter ce que renvoie l'API dans ta console.
j'ai aucune erreur voici le code :
<section ng-controller="SummonerCtrl">
<div class="span11">
<form ng-submit="search()">
<fieldset>
<div class="clearfix">
<label>Summoner</label>
<div class="input">
<input type="text" placeholder="Summoner name" ng-model="summoner" required>
</div>
</div>
<div class="clearfix">
<label>Region</label>
<div class="input">
<select ng-model="region">
<option>euw</option>
<option>euna</option>
<option>na</option>
</select>
</div>
</div>
<div class="actions">
<input type="submit" value="Envoyer" class="btn primary">
<input type="reset" class="btn">
</div>
</fieldset>
</form>
</div>
<section class="informations">
<div class="span11">
<h2>informations obtenues</h2>
<p class="result">{{result}}</p>
<p class="result">{{result.summoner.id}}</p>
<p class="result">{{result.xander18.id}}</p>
</div>
</section>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
<script>
var app = angular.module('app', ]);
app.controller('SummonerCtrl', function($scope, $http){
$scope.summoner = "xander18";
$scope.search = function () {
var url = "https://prod.api.pvp.net/api/lol/" + $scope.region + "/v1.4/summoner/by-name/" + $scope.summoner + "?api_key=acb1d317-2511-4c36-9c44-d8d5bd69bc8e";
$http.get(url).success(httpSuccess).error(function(){
alert('Impossible de récupérer les informations');
});
}
httpSuccess = function(response){
$scope.result = response;
}
});
</script>AAAAAAA T'ASSURE !!!!!!!!! Je cherchais comment concaténé justement et en plus tu ma expliqué un truc qui va me simplifié la vie ! MERCI ENORMEMENT