Show JSON data as selected in Select AngularJS

Question

I don' have a lot of knowledge about AngularJS. I have a JSON with all the data and first I created a select and according to the selected option I show some data or others according to the value, which are the IDs in the json

JSON

$scope.players = [
        {
            "player": {
              "info": {
                "position": "D",
                "shirtNum": 4,
                "positionInfo": "Centre/Right Central Defender"
              },
              "nationalTeam": {
                "isoCode": "BE",
                "country": "Belgium",
                "demonym": "Belgian"
              },
              "age": "27 years 139 days",
              "name": {
                "first": "Toby",
                "last": "Alderweireld"
              },
              "id": 4916,
              "currentTeam": {
                "name": "Tottenham Hotspur",
                "teamType": "FIRST",
                "shortName": "Spurs",
                "id": 21
              }
            },
            "stats": [
              {
                "name": "goals",
                "value": 5
              },
              {
                "name": "losses",
                "value": 20
              },
              {
                "name": "wins",
                "value": 48
              },
              {
                "name": "draws",
                "value": 23
              },
              {
                "name": "fwd_pass",
                "value": 1533
              },
              {
                "name": "goal_assist",
                "value": 2
              },
              {
                "name": "appearances",
                "value": 80
              },
              {
                "name": "mins_played",
                "value": 6953
              },
              {
                "name": "backward_pass",
                "value": 308
              }
            ]
          },
...];

HTML

<select id="select-players" ng-model="Jugador" ng-options="jugador as (jugador.player.name.first + ' ' + jugador.player.name.last) for jugador in players track by jugador.player.id " ng-change="show()">
     <option value="">Select a player...</option>
</select>

And I want to show the details of the player

<div class="content-player">
     <div class="img-team"><span class="img-escudo"><img src="img/tottenham.png" /></span></div>
          <p class="name-player">{{jugador.player.name.first}} {{jugador.player.name.last}} <span class="pos-player">{{jugador.info.positionInfo}}</span></p>
          <div class="cont-desc-player">
               <div class="desc-player">
                    <span class="txt-estadistics">{{jugador.stats.name}}</span>
                    <span class="num-estadistics">{{jugador.stats.value}}</span>
                </div>
                <div class="desc-player separador">
                     <span class="txt-estadistics">{{jugador.info.positionInfo}}</span>
                     <span class="num-estadistics">{{jugador.stats.value}}</span>
                 </div>
                 <div class="desc-player separador">
                      <span class="txt-estadistics">{{jugador.info.positionInfo}}</span>
                      <span class="num-estadistics">{{jugador.stats.value}}</span>
                  </div>
                  <div class="desc-player separador">
                       <span class="txt-estadistics">{{jugador.info.positionInfo}}</span>
                       <span class="num-estadistics">{{jugador.stats.value}}</span>
                  </div>
                  <div class="desc-player separador">
                       <span class="txt-estadistics">{{jugador.info.positionInfo}}</span>
                       <span class="num-estadistics">{{jugador.stats.value}}</span>
                  </div>
             </div>
        </div>

I don't know if I need to create in the controller one switch or using only if and else if is good and how can call it in HTML to show the details.

Thanks

Can you put this in a plunkr?

Kyle
– Kyle

2017-08-21 16:26:24 +00:00
Commented Aug 21, 2017 at 16:26 — Kyle
– Kyle, Commented Aug 21, 2017 at 16:26

JEET ADHIKARI · Accepted Answer · 2017-08-21 16:26:40Z

3

You are using the iterated current object jugador in place of using the Model name Jugador. Try using Jugador.player.name.first instead of jugador.player.name.first and it should work fine if rest of the things are ok. I also don't see the need of ng-change="show()" in your case. Model changes automatically as you change the select value and you can use it.

You use the iterated object name jugador while doing ng-repeat.

answered Aug 21, 2017 at 16:26

JEET ADHIKARI

5392 gold badges6 silver badges19 bronze badges

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

4 Comments

Hadi Over a year ago

sorry for duplicate answer. 1^. I don't read your answer before.

derek Over a year ago

ng-change="show()" I tryed to do one function to show all the results but it didn't work and I forgot delete in the HTML. thanks I try to do it

derek Over a year ago

I'm trying to show all the data about "stats" in Json but don't show the data, I use in a div "ng-repeat='stat in Jugador.stats'" and then I call it like "{{Jugador.stats.name}}" I dont know what i'm doing bad

JEET ADHIKARI Over a year ago

sorry to say derek, but your concept is not clear yet. You can go through some basic angular js tutorial and I am sure you will get it. when you use ng-repeat, stat refers to each object that displays in your repeat. so in that case you use stat.stats.name. And you also cant repeat through Jugador.stats. Jugador is the model name and contains only one selected object

Collectives™ on Stack Overflow

Show JSON data as selected in Select AngularJS

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related