Question

你好我和json对象如下

{
    "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"}]
        }
}

我想把它归还给

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

我在下面编写代码，但我无法在for循环中编写代码，我该怎么办呢？

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

                }

提前致谢

Answer 1

您不需要任何第三方库或JavaScript框架。

使用JavaScript：

最好的方法是使用Array.reduce()对League键进行分组。

data.Result.Teams.reduce(function(result, current) {
    result[current.League] = result[current.League] || [];
    result[current.League].push(current);
    return 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"
        }
    ]
}

对此：

{
  "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"
    }
  ]
}

使用新数组，您需要使用此函数构建select标记：

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

所需的HTML结果将是：

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

用法：

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

这样的事情：

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

Answer 2

我认为使用directives和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"}
        ];
      }

    };

}）;

在本部分中，我使用了一个名为（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

您可以在Angularjs函数中执行此操作：

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

并在您的html页面中：

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

转换json以选择数据

3 个答案: