你好,我有如下所示的 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++)
{
}
提前致谢
最佳答案
您不需要任何第三方库或 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>
关于javascript - 转换json选择数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44248579/