Best Way With Javascript To Turn A Json Object Into A Sorted Html Select
Solution 1:
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.
Fiddle here: 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>
Solution 2:
Dictionaries in JavaScript can't be sorted because they have no concept of order at all. The way I usually solve this is something along the lines of:
var json = [
{
"name": "group1",
"content": [
{"value": "value13", "label": "label13"},
{"value": "value11", "label": "label33"},
...
],
},
{
"name": "group2",
"content": [
...
]
},
...
}
To sort an object like this, you can use a custom sorting function. To sort each group into order:
json.sort(function(a, b) {
if (a.name < b.name) {
return -1;
} else if (a.name > b.name) {
return 1;
} else {
return 0;
}
}
To sort each content array inside a group you can just loop over each value in the json array, and call sort on its content using another custom sorting function like above. For more info on these: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/sort
Solution 3:
By using document.createElement, and a few for loops, we can accomplish this: http://jsfiddle.net/kruduuzo/
First we use a for in loop to get the names of the keys to use as the optgroup. Then we loop through the array within that optgroup, using the group name that we just discovered. Once inside, you then do another for in loop to get the value name, and then use it to set the textContent. Then you simply append the children to their respective parents, and finally the select to the body.
var body = document.getElementsByTagName("body")[0];
var select = document.createElement("select");
select.multiple = true;
for (group in json) {
var optgroup = document.createElement("optgroup");
optgroup.label = group;
var i = 0, count = json[group].length;
for (i; i < count; i++) {
var opt = document.createElement("option");
for (value in json[group][i]) {
opt.value = value;
opt.textContent = json[group][i][value];
}
optgroup.appendChild(opt);
}
select.appendChild(optgroup);
}
body.appendChild(select);
I didn't notice that you said that the format of the json could change. In that case, I'd do something similar to what GravityScore did to your json. However, if you find it easier to keep your json in the same format, my solution definitely gets you where you need to be.
Post a Comment for "Best Way With Javascript To Turn A Json Object Into A Sorted Html Select"