CODEWITHSUNDEEP
javascripthtmlangularjsjson
Ben Clarke
Ben Clarke

Reputation: 1061

AngularJS undefined when using variable

This is my first test application I have been working on using AngularJS and I seem to hitting a few errors on simple things.

I have my AngularJS service which returns JSON to my Controller ('crucify' has been specified but this is whatever the user enters in the texbox):

{"crucify":{"id":37635889,"name":"Crucify","profileIconId":984,"summonerLevel":30,"revisionDate":1450980592000}}

Now in my Controller I want to be able to access the JSON values 'id' and 'name' etc. So I have wrote this:

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

$scope.search = function () {

    var summoner = $scope.summoner;

    personSearch.findPlayer(summoner).then(function (data) {
        $scope.answer = data;
    });
}

}]);

So data is equal to the JSON posted above. How in my HTML do I bind the 'id' and 'name' from the JSON? I have posted my HTML below but this does not seem to work?

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

EDIT:

The user will enter there username in a textbox:

<input type="text" id="txt_searchUser" ng-model="summoner" />

So Crucify is an example and equals to whatever is entered in this box.

Upvotes: 0

Views: 96

Answers (3)

Ruben.sar
Ruben.sar

Reputation: 386

var key=Object.keys(data) //return ["crucify"], object key
$scope.summoner =data[key[0]]; //return object value

Upvotes: 1

min che
min che

Reputation: 158

Have you tried adding ng-if to your divs, like this?

<div data-ng-if="answer.id">Answer: {{answer.id}}</div>
<div data-ng-if="answer.name">Answer: {{answer.name}}</div>

Upvotes: 0

Ruben.sar
Ruben.sar

Reputation: 386

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

$scope.search = function () {

    var summoner = $scope.summoner;

    personSearch.findPlayer(summoner).then(function (data) {
     
      //first method
        $scope.answer = data.crucify;
      //second method
      $scope.answer = data
    });
}

}]);
//first method
<div>Answer: {{answer.id}}</div>
<div>Answer: {{answer.name}}</div>
//second method
<div>Answer: {{answer.crucify.id}}</div>
<div>Answer: {{answer.crucify.name}}</div>

Upvotes: 0

Related Questions