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 valuefunctioncreateSortedArray(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 resultsvar sortedGroups = createSortedArray(json);
for(var index = 0; index < sortedGroups.length; index++) {
var group = sortedGroups[index];
//create optgroup tag and assign label propertyvar optGroup = document.createElement("optgroup");
optGroup.label = group.key;
//sort the properties of the current group using our function againvar optionArray = createSortedArray(group.value);
for(var optionIndex = 0; optionIndex < optionArray.length; optionIndex++ ) {
//options are now sorted, just add to the optgroupvar option = optionArray[optionIndex];
var opt = document.createElement("option");
opt.value = option.key;
opt.textContent = option.value;
optGroup.appendChild(opt);
}
//add optgroup to select tagdocument.getElementById("select").appendChild(optGroup);
}
}
</script></head><body><selectid="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;
} elseif (a.name > b.name) {
return1;
} else {
return0;
}
}
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];
varselect = document.createElement("select");
select.multiple = true;
for (groupin 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 (valuein 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"