How to load a Select with AngularJS and JSON

Question

How to load a Select with AngularJS and JSON

Navigation

#1 by (4 votes)

2

Good, I'm trying to load a select with AngularJS by calling a Json but I do not know how to do it

I have this JSON

       angular.module('playersApp', []).controller("AllPlayerssCtrl", function ($scope) {
$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
          }
        ]
      },...];

and I'm trying to load a select into the HTML trying to load the value of the option with the id and show the player's full name

HTML

<select id="select-players" ng-model="Jugador" ng-options="jugadores as jugadores.player.name.first jugadores.player.name.last for jugadores in players track by jugadores.id" >
    <option></option>
</select>

Thank you very much

Greetings

html5 json angularjs

asked by derek 20.08.2017 в 21:41

source

1 answer

How to add inputs dynamically and that the result appears in other input? What is the difference between the Set and Map interfaces? [closed]

score 4 · Accepted Answer

<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 ">

function MyController($scope) {
$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
          }
        ]
      }];
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>
<div ng-app ng-controller="MyController">

<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 " >
   
</select>
   
</div>

If you want to concatenate the name you have to use

(jugador.player.name.first + ' ' + jugador.player.name.last)