Array.reduce() to fill <select>

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.

const colors = [
    {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

const colorOptions = colors.reduce(
    (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.

const colorOptions = colors.reduce(
    (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().

const colors = [
    {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.

<select id="colors-select"></select>

We can use the DocumentFragment interface to load <select> with options as nodes.

Create DocumentFragment

const fragment = document.createRange().createContextualFragment(
    colorOptions.join('')  // convert colors array to string
)

Fill in <select>

document.getElementById('colors-select').appendChild(fragment)

Result

<select id="colors-select">
    <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

const colors = [
    {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)