javascript - 转换json选择数据

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

对于新数组，您需要使用此函数构建选择标签:

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>