brown-wall/main.js

"using strict";

const menus = [ { "name": "Fruit", "items": [ "Banana", "Orange", "Pineapple", "Apple" ], "description":"What it says on the tin." }, { "name": "Genre", "items": [ "FFP", "Jiminy Cockthroat", "しひろ Cockthroat", "Spunk Gargle Weewee" ], "description":"Overal genre of the thinky thing" } ];

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 description = Object.assign(document.createElement('p'), {innerHTML:menu.description});
    const dropdownSelect = document.createElement('select');

    dropdownMenu.id = menu.name.toLowerCase();
    dropdownMenu.className = "dropdown-menu";
    dropdownMenu.appendChild(menuTitle)
    dropdownMenu.appendChild(description)
    menuContainer.appendChild(dropdownMenu)
    dropdownMenu.appendChild(dropdownSelect)

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

document.getElementById('import').onclick = function() {
    const files = document.getElementById('selectFiles').files;
    if (files.length <= 0) {
        return false;
    }
  
  var fr = new FileReader();
  
  fr.onload = function(e) { 
  console.log(e);
    var result = JSON.parse(e.target.result);
    var formatted = JSON.stringify(result, null, 2);
        document.getElementById('result').value = formatted;
  }
  
  fr.readAsText(files.item(0));
};