Nested Map function

Question

I have an array that I use to generate a series of options that will be populated into a html select element. This currently works fine. I've done various benchmark testing and .map() is the most efficient approach.

My question is, how can I group the options within an optgroup element. I've tried using nested .map() but it out puts the options ungrouped still.

JS Fiddle https://jsfiddle.net/57gbxrzc/

const myOptsArr = [
        {
            title: 'Fruit',
            values: ['apple','pear','grapes','beer']
        },
        {
            title: 'Animals',
            values: ['apple','dog','mouse','cat']
        },
        // more here
    ];

let myOpts = `
    <option value="">Select Option</option>
  ${myOptsArr.map(item => `
        </optgroup label="${item.title}">${
        item.values.map(itemValue => `
                <option value="${itemValue}">${itemValue}</option>
            `).join('')}
        </optgroup>;
  `).join('')}
`;

document.getElementById('mySelect').innerHTML = myOpts;

you are closing this tag </optgroup label="${item.title}">${ instead of opening it. It should be <optgroup label="${item.title}">${. — Paul Bota
– Paul Bota, Commented Jun 20, 2019 at 14:44
@PaulBota thanks! good catch. Please put it as an answer and i'll mark it as correct. Or should I just delete the question as it wasn't a logic issue? — steve
– steve, Commented Jun 20, 2019 at 14:48

Code Maniac · Accepted Answer · 2019-06-20 14:53:38Z

1

You need to fix following problems

<optgroup> not </optgroup>
You don't need to join()

Demo

edited Jun 20, 2019 at 14:53

answered Jun 20, 2019 at 14:46

Code Maniac

37.9k5 gold badges44 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Maheer Ali Over a year ago

I can't see any difference b/w OP's link and your link. The code doesn't work in your fiddle. Also create a runnable snippet on SO instead of giving external links.

Code Maniac Over a year ago

@MaheerAli oh just forgot to save, thanks for pointning out updated

Avin Kavish · Accepted Answer · 2019-06-20 14:47:57Z

0

You have a syntax error

</optgroup label="${item.title}">${
// change to
<optgroup ...

answered Jun 20, 2019 at 14:47

Avin Kavish

9,0872 gold badges27 silver badges39 bronze badges

Collectives™ on Stack Overflow

Nested Map function

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related