Variable within a object reference

Question

I'm getting the username from the input field and sending it as the parameter to the searchUser function. What it returns the username with a value of more objects.

so if I send 'daveeeeeed' in the input field and submit then it sends back

{"daveeeeeed":{"id":30155374,"name":"daveeeeeed","profileIconId":577,"summonerLevel":30,"revisionDate":1443840218000}}

so in my html document I'm trying to access res.'daveeeeeed'.name to print out the name from the request. But obviously {{ res.username.name }} isn't working. and in the javascript I cant use $scope.res = data.username.name.

My question is; how do I use a variable from a object? ex.

my goal res.username.name //replace username with whatever was send in form

<form>
 <input type="text" ng-model="username" placeholder="username" name="username" />
 <button ng-click="searchUser(username)" class="btn btn-primary">Submit</button>
</form>
{{ res }}

here's the javascipt

 $scope.searchUser = function(username){

   $http.get('https://na.api.pvp.net/api/lol/na/v1.4/summoner/by-name/' + username + '?api_key=<key>').
    success(function(data) {
        $scope.res = data;
    }).error(function(err) {
        $scope.res = "User not found";
    });
}

You can add username to $scope before making http call. Then you can access it in your DOM template like this {{ res[username] }} — Sachin Jain
– Sachin Jain, Commented Dec 15, 2015 at 3:49
thank you so much! I completely forgot about that, I feel so dumb! — David Diefenderfer
– David Diefenderfer, Commented Dec 15, 2015 at 3:52
Another option is to pull the key from the object, for example Object.keys(data)[0] (assuming only one key) — Phil
– Phil, Commented Dec 15, 2015 at 3:54
also try... res[username]["name"] it should provide you what you want, — harishr
– harishr, Commented Dec 15, 2015 at 3:55
@Phil That's very simple to do but I usually avoid assuming things especially in code. It just increases readability of code. May be Personal Opinion. Thanks :-) — Sachin Jain
– Sachin Jain, Commented Dec 15, 2015 at 4:01

Sachin Jain · Accepted Answer · 2015-12-15 03:59:42Z

1

Adding Answer from comment:

You can add username to $scope before making http call. Then you can access it in your DOM template like this {{ res[username] }}.

So Your code should look like this:

$scope.searchUser = function(username){

  $scope.username = username; // Notice this change

  $http.get('https://na.api.pvp.net/api/lol/na/v1.4/summoner/by-name/' + username + '?api_key=<key>').
    success(function(data) {
      $scope.res = data;
    }).error(function(err) {
      $scope.res = "User not found";
    }
  );
}

Template should look like this:

{{ res[username] }}

answered Dec 15, 2015 at 3:59

Sachin Jain

21.9k34 gold badges113 silver badges177 bronze badges

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

Comments

Rabi · Accepted Answer · 2015-12-15 04:16:32Z

0

you can do it in two ways -

Method 1 : When returning the result, make the property of the object a static value (e.g. instead of sending daveeeeeed, send user).

{"user":{"id":30155374,"name":"daveeeeeed","profileIconId":577,"summonerLevel":30,"revisionDate":1443840218000}}

this way, you can display the name as :

<div> {{res.user.name}} </div>

Method 2 If you follow your own way,

<div> {{res[username].name}} </div>

answered Dec 15, 2015 at 4:16

Rabi

2,23019 silver badges18 bronze badges

Collectives™ on Stack Overflow

Variable within a object reference

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related