I have a list of colors sitting in my database and a <select> HTML element where I want to use these colors as <option>s.
Colors
I get the values from the database and store them in a variable.
{val: “1“, name: “Black“},
{val: “2“, name: “Red“},
{val: “3“, name: “Yellow“},
{val: “4“, name: “Green“},
{val: “5“, name: “Blue“},
{val: “6“, name: “White“}
]
Generate options with Array.reduce()
With return in the reducer callback
(options, color) => {
options.push(`<option value=”${color.val}“>${color.name}</option>`)
return options
}, []
)
Without the return word in the reducer callback
We use Grouping ( ) and Comma (,) operators for one-liner implementation.
Identation is added for better human readability.
(options, color) => (
options.push(`<option value=”${color.val}“>${color.name}</option>`),
options
), []
)
Resulting colorOptions
‘<option value=”1″>Black</option>‘,
‘<option value=”2″>Red</option>‘,
‘<option value=”3″>Yellow</option>‘,
‘<option value=”4″>Green</option>‘,
‘<option value=”5″>Blue</option>‘,
‘<option value=”6″>White</option>‘
]
Sort before reducing
You can also sort on val or name before Array.reduce().
{val: “1“, name: “Black“},
{val: “2“, name: “Red“},
{val: “3“, name: “Yellow“},
{val: “4“, name: “Green“},
{val: “5“, name: “Blue“},
{val: “6“, name: “White“}
].sort(
(a, b) => a.name.localeCompare(b.name)
)
// colors => [
// ‘<option value=”1″>Black</option>’,
// ‘<option value=”5″>Blue</option>’,
// ‘<option value=”4″>Green</option>’,
// ‘<option value=”2″>Red</option>’,
// ‘<option value=”6″>White</option>’,
// ‘<option value=”3″>Yellow</option>’
// ]
Use DocumentFragment to fill in <select>
We have a <select> on a page which is currently empty.
We can use the DocumentFragment interface to load <select> with options as nodes.
Create DocumentFragment
colorOptions.join(”) // convert colors array to string
)
Fill in <select>
Result
<option value=“1”>Black</option>
<option value=“5”>Blue</option>
<option value=“4”>Green</option>
<option value=“2”>Red</option>
<option value=“6”>White</option>
<option value=“3”>Yellow</option>
</select>
Full code snippet
{val: “1“, name: “Black“},
{val: “2“, name: “Red“},
{val: “3“, name: “Yellow“},
{val: “4“, name: “Green“},
{val: “5“, name: “Blue“},
{val: “6“, name: “White“}
].sort(
(a, b) => a.name.localeCompare(b.name)
)
const colorOptions = colors.reduce(
(options, color) => (
options.push(`<option value=”${color.val}“>${color.name}</option>`),
options
), []
).join(”)
const fragment = document.createRange().createContextualFragment(colorOptions)
document.getElementById(‘colors-select‘).appendChild(fragment)
