brown-wall/main.js

"using strict";

const fruits = [ "Apple"
               , "Banana"
               , "Grapefruit"
               , "Orange"
               ]

const genres = [ "FPP"
               , "Action Adventure"
               , "Lobotomy aka Idlegame"
               , "Specticle Fighter"
               ]

//const menus = [ { "name": "Fruit", "items": [ "Banana", "Orange", "Pineapple", "Apple" ] }, { "name": "Genre", "items": [ "FFP", "Jiminy Cockthroat", "しひろ Cockthroat", "Spunk Gargle Weewee" ] } ];
const menus = [ { "name": "Fruit", "items": [ "Banana", "Orange", "Pineapple", "Apple" ] }, { "name": "Genre", "items": [ "FFP", "Action Adventrue", "Lobotomy aka Idlegame" ] } ];

const menuContainer = document.getElementById('menu-container');

menus.forEach( menu =>{
    const dropdownMenu = document.createElement('menu');
    const menuTitle = Object.assign(document.createElement('h2'), {innerHTML:menu.name});
    const dropdownSelect = document.createElement('select');

    dropdownMenu.id = menu.name.toLowerCase();
    menuContainer.append(menuTitle)
    menuContainer.appendChild(dropdownMenu)
    dropdownMenu.appendChild(dropdownSelect)

    menu.items.forEach(item =>{
        dropdownSelect.append(Object.assign(document.createElement('option'), {id:item.toLowerCase(), innerHTML:item}))
    })
})