HTML coding question:

Dynamically allocated 3-column restaurant menu layout. The info for the restaurants is in an external Javascript file. I will attach the format of one single restaurant. The restaurants are chosen form a drop down menu and the left column has a list of the categories in the restaurant's menu (these are also be links to allow the user to skip directly to that category within the menu). The middle column should present the menu items of the restaurant within the categories and the rightmost column is the order summary after menu items are added.

I am struggling to populate the columns dynamically. With what I have so far the list items come up as object or unknown. Any help would be appreciated.

From the external Javascript file:

let restaurants = [aragorn, legolas, frodo];

From my html code so far:

Snippet from script:

dropdown.onchange = function() {

document.getElementById("categories").innerHTML = restaurants[key].menu;

}

Snippet for html:

.

Let aragorn = { name: "Aragorn's Orc BBQ", //The name of the restaurant min order: 20, //The minimum order amount required to place an order delivery charge: 5, //The delivery charge for this restaurant //The menu menu: { // First category "Appetizers": { //First item of this category 0: { name: "Orc feet", description: "Seasoned and grilled over an open flame.", // price: 5.50 1: { name: "Pickled Orc fingers", description: "Served with warm bread, 5 per order.", price: 4.00 2: { //Thank you Kiratchii name: "Sauron's Lava Soup", description: "It's just really spicy water.". price: 7.50 3: { name: "Eowyn's (In) Famous Stew", description: "Bet you can't eat it all.", price: 0.50 4: { name: "The 9 rings of men.", description: "The finest of onion rings served with 9 different dipping sauces.", price: 14.50 "Combos": { 5: { name: "Buying the Farm", description: "An arm and a leg, a side of cheek meat, and a buttered biscuit.", price: 15.99 }, 6: { name: "The Black Gate Box", description: "Lots of unidentified pieces. Serves 50.", price: 65.00 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157

CATEGORIES

Here are the categories restaurant offers!

MENU

Here's the restaurant menu, take a look!

SUMMARY

'

Your order summary:

Let aragorn = { name: "Aragorn's Orc BBQ", //The name of the restaurant min order: 20, //The minimum order amount required to place an order delivery charge: 5, //The delivery charge for this restaurant //The menu menu: { // First category "Appetizers": { //First item of this category 0: { name: "Orc feet", description: "Seasoned and grilled over an open flame.", // price: 5.50 1: { name: "Pickled Orc fingers", description: "Served with warm bread, 5 per order.", price: 4.00 2: { //Thank you Kiratchii name: "Sauron's Lava Soup", description: "It's just really spicy water.". price: 7.50 3: { name: "Eowyn's (In) Famous Stew", description: "Bet you can't eat it all.", price: 0.50 4: { name: "The 9 rings of men.", description: "The finest of onion rings served with 9 different dipping sauces.", price: 14.50 "Combos": { 5: { name: "Buying the Farm", description: "An arm and a leg, a side of cheek meat, and a buttered biscuit.", price: 15.99 }, 6: { name: "The Black Gate Box", description: "Lots of unidentified pieces. Serves 50.", price: 65.00 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157

CATEGORIES

Here are the categories restaurant offers!

MENU

Here's the restaurant menu, take a look!

SUMMARY

'

Your order summary: