Convert json to select data

Question

Hello, I have a json object as shown below

{
    "Status":200,
    "Result":{
        "Teams":[{"League":"Türkiye Spor Toto Süper Lig","TeamId":16,"Team":"Beşiktaş"},{"League":"Türkiye Spor Toto Süper Lig","TeamId":17,"Team":"Başakşehir"},{"League":"La Liga","TeamId":18,"Team":"Barcelona"},{"League":"La Liga","TeamId":19,"Team":"Real Madrid"}]
        }
}

and I want to return it

 <select><optgroup label="Türkiye Spor Toto Süper Lig">
                <option value="16">Beşiktaş</option>
                <option value="17">Başakşehir</option>

              </optgroup>
<optgroup label="La Liga">
                <option value="18">Barcelona</option>
                <option value="19">Real Madrid</option>

              </optgroup></select>

I wrote the code below, but I could not write it for the loop, how can I do this?

  var teams = data.Result.Teams;
                var option = "";
                for (var i = 0; i < teams.length; i++)
                {

                }

Thanks in advance

Answer 1

You do not need any third-party JavaScript library or infrastructure.

With JavaScript:

The best way is to group using the key Leaguewith Array.reduce().

data.Result.Teams.reduce(function(result, current) {
    result[current.League] = result[current.League] || [];
    result[current.League].push(current);
    return result;
}, {});

So you can convert this:

{
    "Teams": [
        {
            "League": "Türkiye Spor Toto Süper Lig",
            "TeamId": 16,
            "Team": "Beşiktaş"
        },
        {
            "League": "Türkiye Spor Toto Süper Lig",
            "TeamId": 17,
            "Team": "Başakşehir"
        },
        {
            "League": "La Liga",
            "TeamId": 18,
            "Team": "Barcelona"
        },
        {
            "League": "La Liga",
            "TeamId": 19,
            "Team": "Real Madrid"
        }
    ]
}

For this:

{
  "Türkiye Spor Toto Süper Lig": [
    {
      "League": "Türkiye Spor Toto Süper Lig",
      "TeamId": 16,
      "Team": "Beşiktaş"
    },
    {
      "League": "Türkiye Spor Toto Süper Lig",
      "TeamId": 17,
      "Team": "Başakşehir"
    }
  ],
  "La Liga": [
    {
      "League": "La Liga",
      "TeamId": 18,
      "Team": "Barcelona"
    },
    {
      "League": "La Liga",
      "TeamId": 19,
      "Team": "Real Madrid"
    }
  ]
}

With the new array, you need to create a select tag using this function:

function buildSelect(data) {
    var i, len, select = "<select>";

    for (item in data) {
      select += "<optgroup label=\"";
      select += item;
      select += "\">";
      len = data[item].length;
      for (i = 0; i < len; i++) {
        select += "<option value=\"";
        select += data[item][i].TeamId;
        select += "\">";
        select += data[item][i].Team;
        select += "</option>";
      }
      select += "</optgroup>";
    }
    select += "</select>";
    return select;
}

So the desired HTML result:

<select>
    <optgroup label="Türkiye Spor Toto Süper Lig">
      <option value="16">Beşiktaş</option>
      <option value="17">Başakşehir</option>
    </optgroup>
    <optgroup label="La Liga">
      <option value="18">Barcelona</option>
      <option value="19">Real Madrid</option>
    </optgroup>
</select>

Using:

document.getElementById("result").innerHTML = buildSelect(getLeagues(data));

Something like that:

(function() {
  var data = {
    "Status": 200,
    "Result": {
      "Teams": [{
          "League": "Türkiye Spor Toto Süper Lig",
          "TeamId": 16,
          "Team": "Beşiktaş"
        },
        {
          "League": "Türkiye Spor Toto Süper Lig",
          "TeamId": 17,
          "Team": "Başakşehir"
        },
        {
          "League": "La Liga",
          "TeamId": 18,
          "Team": "Barcelona"
        },
        {
          "League": "La Liga",
          "TeamId": 19,
          "Team": "Real Madrid"
        }
      ]
    }
  };

  // Returns teams grouped by league.
  function getLeagues(data) {
    var leagues = data.Result.Teams.reduce(function(result, current) {
      result[current.League] = result[current.League] || [];
      result[current.League].push(current);
      return result;
    }, {});
    return leagues;
  }

  function buildSelect(data) {
    var i, len, select = "<select>";

    for (item in data) {
      select += "<optgroup label=\"";
      select += item;
      select += "\">";
      len = data[item].length;
      for (i = 0; i < len; i++) {
        select += "<option value=\"";
        select += data[item][i].TeamId;
        select += "\">";
        select += data[item][i].Team;
        select += "</option>";
      }
      select += "</optgroup>";
    }
    select += "</select>";
    return select;
  }
  document.getElementById("result").innerHTML = buildSelect(getLeagues(data));
})();

<div id="result">
</div>

Run codeHide result

Answer 2

, - , ng-repeat

app.directive('theTeams', function() {

    return {
      restrict: 'E',
      scope: { model: '=' },
      template: '<select ng-model="model" ng-options="option.TeamId as option.Team group by option.League for option in options"></select>',
      controller: function($scope) {
        $scope.options = [
          {"League":"Türkiye Spor Toto Süper Lig","TeamId":16,"Team":"Beşiktaş"},
          {"League":"Türkiye Spor Toto Süper Lig","TeamId":17,"Team":"Başakşehir"},
          {"League":"La Liga","TeamId":18,"Team":"Barcelona"},
          {"League":"La Liga","TeamId":19,"Team":"Real Madrid"}
        ];
      }

    };

});

i, , (theTeams)

<select ng-model="model" ng-options="option.TeamId as option.Team group by option.League for option in options"></select>

League Team

Plunker, ,

PD: html:)

Answer 3

You can do this in your Angularjs function:

var teams  = data.Result.Teams;
var teams2 = [];
for (var i = 0; i < teams.length; i++)
{
    teams2.push(teams[i]);
}

and on the html page:

<select ng-model="modelname" ng-options="opt.TeamId ' - ' opt.Team for opt in teams2 track by opt.TeamId">
    <option value=""></option>
</select>