angularjs. Display object property after http.get

Question

I am new to Angular.js and i did the tutorial Shaping up with angularjs in codeschool.com so please forgive me if the problem i am trying to solve might be too easy to resolve.

So, i am just trying to show a data i get from $http.get() which is JSON object into my document.

index.html:

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>League of legends</title>

    <!-- Load StyleSheets -->
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">

    <!-- Load Javascript Libraries -->
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/angular.min.js"></script>
    <script type="text/javascript" src="js/app.js"></script>
</head>
<body ng-app="LeagueOfLegends">
    <!-- Navbar menu -->
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <div class="collapse navbar-collapse">
                <ul class="nav navbar-nav">
                    <li>
                        <a href="#">About</a>
                    </li>
                    <li>
                        <a href="#">Contact</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    <div class="container">
        <div ng-controller="searchSummoner as summoner">
            <!-- Search Form -->
            <div ng-show="summoner.status.showSearch">
                <form ng-submit="summoner.search()">
                    <div class="well">
                        <div class="form-group">
                            <label for="summonerName">Summoner Name</label>
                            <input type="text" class="form-control" placeholder="Enter Summoner Name" id="summonerName" ng-model="summoner.form.name">
                        </div>
                        <div class="form-group">
                            <label ng-repeat="region in summoner.region">
                                <input type="radio" ng-model="summoner.form.region" ng-value="region">{{region}}
                            </label>
                        </div>
                        <input type="submit" class="btn btn-default" value="Search"></input>
                    </div>
                </form>
            </div>
            <p ng-show="summoner.status.showResult">Get request from: {{summoner.data.name}}</p>
        </div>
    </div>
</body>

app.js (module-controller):

var app = angular.module('LeagueOfLegends', []);

app.controller('searchSummoner', ['$http', function($http)
{
    var form = {};
    this.data = {};

    this.form = {};
    this.status = {
        showSearch: true,
        showResult: false
    };

    this.region = ['br', 'eune', 'euw', 'lan', 'las', 'na', 'oce', 'kr', 'tr'];

    this.search = function()
    {
        form = this.form;

        this.form = {};

        // get data from the api rest
        $http.get(getApiUrl(form)).success(function(data){
            this.data = data[form.name];
            console.log(this.data);
        });

        // hide form
        this.status.showSearch = false;
        this.status.showResult = true;
    };
}]);

function getApiUrl(form)
{
    var apiKey = 'fe9eb24f-5800-4f2a-b570-15328062b341';

    return 'https://lan.api.pvp.net/api/lol/' + form.region + '/v1.4/summoner/by-name/' + form.name + '?api_key=fe9eb24f-5800-4f2a-b570-15328062b341'
}

after $http.get was successfully made, i make a log just to check if the data i retrieve is the one i need, but it does not show the object property in html

topheman · Accepted Answer · 2014-12-19 00:01:31Z

1

You're using this in the wrong closure. This is what you should do :

var that = this;//give controller scope access

// get data from the api rest
$http.get(getApiUrl(form)).success(function(data){
    that.data = data[form.name];
    console.log(that.data);
});

answered Dec 19, 2014 at 0:01

topheman

7,9725 gold badges26 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Oscar Reyes Over a year ago

i don't quite understand it. but it seems like it works this way and i have to get use to it, i just don't see how declaring a variable named that with this value would do it

topheman Over a year ago

the this you were using was the one of the success callback function, not the one of your controller, so assigning this.data = ... inside the callback didn't endup in the data attribute of your controller

Oscar Reyes Over a year ago

ow. i didn't know this was refering to the success callback function, thanks for your explanation

garbanzio · Accepted Answer · 2014-12-19 00:52:33Z

1

You could also bind your context like this:

$http.get(getApiUrl(form)).success(function(data){
    this.data = data[form.name];
    console.log(this.data);
}.bind(this));

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind

answered Dec 19, 2014 at 0:52

garbanzio

8461 gold badge7 silver badges10 bronze badges

Collectives™ on Stack Overflow

angularjs. Display object property after http.get

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related