I've been doing JavaScript off-and-on for a long time, over 20 years. Periodically I forget that JavaScript is very powerful. That it's not the too-quickly-built language stapled into browsers anymore, that forces DOM hackery mitigated by jQuery. That I must use tools like Vue.js, React, etc. to make it work in the browser.
So when I rediscover yet again for the umpteenth time that JavaScript is powerful and works great natively with the DOM without frameworks, it's fun and exciting.
Let's explore a snippet of code I just wrote. I received a list of zip codes to be displayed in a dropdown list. First, I convert the zip codes to an array:
const zipCodes = `90004
90005
90006
90007
90008
<snipped for brevity>
`.split('\n');
Then I get the select element from the DOM:
const select = document.getElementById('grid-zip');
With the zipCodes array and select element ready, I construct the loop that adds the available zip codes to the form. Each line is commented t explain what I'm doing:
// Loop over the `zipCodes`, assigning each value to `zipCode`
// Python users take note I'm using a `for...of` loop to iterate
// because `for...in` doesn't work as you would expect.
for (let zipCode of zipCodes) {
// Create new option element, value and displayed text set to zip code.
let option = new Option(zipCode, zipCode);
// Inject the new option element into the select element.
select.appendChild(option);
}
Altogether it looks like this:
// Convert the zip codes from a multiline string to an array
const zipCodes = `90004
90005
90006
90007
90008
<snipped for brevity>
`.split('\n');
// Get the select element from the DOM
const select = document.getElementById('grid-zip');
// Loop over the `zipCodes`, assigning each value to `zipCode`
// Python users take note I'm using a `for...of` loop to iterate
// because `for...in` doesn't work as you would expect.
for (let zipCode of zipCodes) {
// Create new option element, value and displayed text set to zip code.
let option = new Option(zipCode, zipCode);
// Inject the new option element into the select element.
select.appendChild(option);
}
Top comments (0)