使用javascript将json对象转换为分类html选择的最佳方式 [英] Best way with javascript to turn a json object into a sorted html select
问题描述
将json对象转换为排序的HTML select（仅限直接javascript）的最佳方法是什么？
What would be the best way to turn a json object into a sorted HTML select (straight javascript only)?
如果需要，json的格式可以更改。我一直在搜索和大多数文档说，对象键不能排序，只有数组可以排序，但我无法弄清楚如何修改json的结构，使其成为一个数组，因此可以轻松排序。
The format of the json can change if needed. I have been searching and most documentation says that object keys can not be sorted only arrays can be sorted, but I couldn't figure out how I would modify the structure of the json to make it an array and therefore easily sortable.
var json = {
"group3": [
{"value33": "label33"},
{"value13": "label13"},
{"value23": "label23"}
],
"group1": [
{"value21": "label21"},
{"value31": "label31"},
{"value11": "label11"}
],
"group2": [
{"value22": "label22"},
{"value12": "label12"},
{"value32": "label32"}
]
};
会变成这样：
Will become this:
<select multiple="multiple">
<optgroup label="Group 1">
<option value="value11">Label 11</option>
<option value="value21">Label 21</option>
<option value="value31">Label 31</option>
</optgroup>
<optgroup label="Group 2">
<option value="value12">Label 12</option>
<option value="value22">Label 22</option>
<option value="value32">Label 32</option>
</optgroup>
<optgroup label="Group 3">
<option value="value13">Label 13</option>
<option value="value23">Label 23</option>
<option value="value33">Label 33</option>
</optgroup>
</select>
推荐答案
我能够通过修改你的JSON略微（因为你说这是好的），并编写一个自定义的排序功能。
I was able to solve this by modifying the structure of your JSON slightly (since you said this was OK) and writing a custom sorting function.
小提琴在这里： http://jsfiddle.net/9urusm5p/2/
<html>
<head>
<script>
//take an object and loop through all the properties
//each property goes into an array and is sorted
//loop through the sorted array and build an output array of objects
//objects in output have 2 properties
//key = original property name, value = original property value
function createSortedArray(obj) {
var returnArray = [];
var sortingArray = [];
for(var property in obj) {
sortingArray.push(property);
}
sortingArray.sort();
for(var index = 0; index < sortingArray.length; index++) {
var property = sortingArray[index];
var newObject = {};
newObject.key = property;
newObject.value = obj[property];
returnArray.push(newObject);
}
return returnArray;
}
window.onload = function() {
var json = {
"group3": {
"value33": "label33",
"value13": "label13",
"value23": "label23"
},
"group1": {
"value21": "label21",
"value31": "label31",
"value11": "label11"
},
"group2": {
"value22": "label22",
"value12": "label12",
"value32": "label32"
}
};
//sort source object with function above and loop through results
var sortedGroups = createSortedArray(json);
for(var index = 0; index < sortedGroups.length; index++) {
var group = sortedGroups[index];
//create optgroup tag and assign label property
var optGroup = document.createElement("optgroup");
optGroup.label = group.key;
//sort the properties of the current group using our function again
var optionArray = createSortedArray(group.value);
for(var optionIndex = 0; optionIndex < optionArray.length; optionIndex++ ) {
//options are now sorted, just add to the optgroup
var option = optionArray[optionIndex];
var opt = document.createElement("option");
opt.value = option.key;
opt.textContent = option.value;
optGroup.appendChild(opt);
}
//add optgroup to select tag
document.getElementById("select").appendChild(optGroup);
}
}
</script>
</head>
<body>
<select id="select" multiple="multiple" style="height:300px;width:100px;"></select>
</body>
</html>
这篇关于使用javascript将json对象转换为分类html选择的最佳方式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
