转换json以选择数据 [英] convert json to select data

问题描述

你好，我和下面的json对象

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

我想将其返回给

 <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循环中编写代码，该怎么办?

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++)
                {

                }

预先感谢

推荐答案

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

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

使用JavaScript:

最好的方法是使用League键进行分组"nofollow noreferrer"> Array.reduce() .

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

对此:

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

因此，所需的HTML结果将是:

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>

用法:

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>

这篇关于转换json以选择数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！