🔧 Use Array.reduce() to fill <select>
Nachrichtenbereich: 🔧 Programmierung
🔗 Quelle: dev.to
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)
🔧 Use Array.reduce() to fill <select>
📈 52.17 Punkte
🔧 Programmierung
🔧 Fun with Array.prototype.fill()
📈 25.66 Punkte
🔧 Programmierung
🔧 SELECT - INSERT INTO SELECT
📈 23.91 Punkte
🔧 Programmierung
🔧 SELECT * FROM S3 | Query data via S3 Select
📈 23.91 Punkte
🔧 Programmierung
🔧 What is Array.reduce in JavaScript?
📈 20.67 Punkte
🔧 Programmierung
🔧 What is Array.reduce in JavaScript?
📈 20.67 Punkte
🔧 Programmierung
🔧 Understanding Array.reduce()
📈 20.67 Punkte
🔧 Programmierung
🔧 The Power Of Array.reduce()🐐
📈 20.67 Punkte
🔧 Programmierung
🔧 Array.reduce() is Goated 🐐✨
📈 20.67 Punkte
🔧 Programmierung
🔧 Array.reduce() in JavaScript
📈 20.67 Punkte
🔧 Programmierung
🐧 Convert 1d Array to 2d Array Python
📈 19.7 Punkte
🐧 Linux Tipps
🔧 2022. Convert 1D Array Into 2D Array
📈 19.7 Punkte
🔧 Programmierung