AngularJS undefined when using variable

Question

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.

had to remove my answer since you're question is incomplete

Leo
– Leo

2015-12-24 18:35:07 +00:00
Commented Dec 24, 2015 at 18:35 — Leo
– Leo, Commented Dec 24, 2015 at 18:35
@Leo Updated my question a little.

Ben Clarke
– Ben Clarke

2015-12-24 18:40:24 +00:00
Commented Dec 24, 2015 at 18:40 — Ben Clarke
– Ben Clarke, Commented Dec 24, 2015 at 18:40

Ruben.sar · Accepted Answer · 2015-12-24 19:02:54Z

1

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

answered Dec 24, 2015 at 19:02

Ruben.sar

3863 silver badges12 bronze badges

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

2 Comments

Ben Clarke Over a year ago

adding this worked. Thanks for your help :) Merry Christmas!

Ruben.sar Over a year ago

I'm glad to be useful. Merry Christmas!

Ruben.sar · Accepted Answer · 2015-12-24 18:48:00Z

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>

Please read the question. I can't specify Crucify as this is whatever the user enters in the textbox. Crucify was an example.

min che · Accepted Answer · 2015-12-24 18:55:12Z

0

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>

answered Dec 24, 2015 at 18:55

min che

1581 silver badge10 bronze badges

1 Comment

min che Over a year ago

I've just looked at your json a bit more carefully, you have a crucify nested, have you tried using answer.crucify.id ? edit: answer[summoner].id where summoner = 'crucify' for example

Collectives™ on Stack Overflow

AngularJS undefined when using variable

3 Answers 3

2 Comments

1 Comment

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

1 Comment

Related