Join the Stack Overflow Community
Stack Overflow is a community of 6.7 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 6 down vote favorite

I am learning AngularJS and have the structure of the project set up but when i call the API that returns me JSON i can't display that in the html.

The idea is you click on the button and the returned result will be displayed in {{answer}}.

HTML:

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

Controller:

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

    $scope.search = function () {

        $scope.answer = personSearch.findPlayer();

    }

}]);

Service:

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;

        });

    };

});

The URL is hitting success with the correct response. How do I now get the data to display in the HTML.

share|improve this question
    
findPlayer returns nothing, you need return value – Abdelrhman Mohamed Dec 24 '15 at 11:42
up vote 4 down vote accepted

You are not assigning any data to the answer (actually assigning undefined) because findPlayer doesn't return anything.

So first of all, you need to make service method return promise object:

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;
    });
};

then consume it in controller:

$scope.search = function () {
    personSearch.findPlayer().then(function(data) {
        $scope.answer = data;
    });
}
share|improve this answer
    
I get an error Cannot read property 'then' of undefined at Scope.$scope.search – Ben Clarke Dec 24 '15 at 11:50
    
You forgot to put return before $http in findPlayer function. Check my code in the answer one more time. – dfsq Dec 24 '15 at 11:53
    
Ahh i see, i thought i was returning something to $scope.answer with return response? But this work now thanks :) – Ben Clarke Dec 24 '15 at 11:56
up vote 3 down vote

Angular has a Json filter you can add to the actual binding expression, once you have the json back.

{{ answer | json }}

If you want the actual json from the response, you can find it in the data property of the response object.

response.data

Improvement suggestion:

I've also provided a 'nicer' short hand for your http get method which I think its actually better because it'll handle any exceptions that gets thrown rather than using an error callback in your case.

return $http.get(apiUrl)
          .then(successCB)
          .catch(errorCB);
share|improve this answer
up vote 1 down vote

Please log this JSON object and figure out proporty you want display

{answer: "a"}

then your view will be as 

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

and return data from findPlayer function or promise

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.