convert json to select data

Question

Hello I have and json object like 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 to

 <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 code below but I couldnt write it in for loop how can I do it ?

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

                }

Thanks in advance

To setup for the ``s, you'll probably want to group the collection by `League`. Related: [What is the most efficient method to groupby on a javascript array of objects?](https://stackoverflow.com/questions/14446511/what-is-the-most-efficient-method-to-groupby-on-a-javascript-array-of-objects) — Jonathan Lonowski, May 29 '17 at 18:41

Danny Fardy Jhonston Bermúdez · Accepted Answer · 2017-05-29T21:34:28.600

You don't need of any third party library or JavaScript framework.

With JavaScript:

The best way is by grouping with the League key by using 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"
        }
    ]
}

To 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 build the select tag by 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 would be:

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

Usage:

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

Something like this:

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

marjes · Answer 2 · 2017-05-29T20:17:39.643

I think the best option for show you data is using angularjs, using directives and 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"}
        ];
      }

    };

});

in this part i using a directive called(theTeams) with template

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

where organize the array for each League and show the Team

here i put a Example in Plunker , i hope it can help you

PD: picture with the html result :)

anderson seibert · Answer 3 · 2017-05-29T20:31:11.473

0

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 in your html page:

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

edited May 29 '17 at 20:31

answered May 29 '17 at 20:22

anderson seibert

107
5

1

that is not a pure javascript, you are using Angularjs – marjes May 29 '17 at 20:25

convert json to select data

3 Answers3

Linked