Intermediate JavaScript: Building Frontend Components/

...

/

Extending the Submenu Functionality

Extending the Submenu Functionality

Now we will extend the submenu functionality by fetching dynamic data and images from the server, and making submenus distinct.

We'll cover the following...

Rendering submenu items #

The values that’ll come from our server are as follows:

  • The lists that go into each column
  • The image matching the menu item

It’ll take a fair bit of refactoring to go from the hardcoded version we have now to one that’s populated by the server.

First, let’s modify the server so that it can handle the requests we’re about to make.

Press + to interact
// Server
function getCategories(data) {
  if (data.category == 'top') {
    return [
      'Server apple',
      'Server banana',
      'Server pear',
      'Server orange'
    ];
  }
  if (data.category == 'additional') {
    return [
      'Server square',
      'Server circle',
      'Server oval',
      'Server diamond'
    ];
  }
  return [];
}
const endpoints = {
  "/categories": {
    "get": getCategories
  }
}
function getFunction(url, data, callback) {
  const domain = url.substring(0, url.indexOf("/"));
  const endpoint = url.substring(url.indexOf("/"), url.length);
  callback(endpoints[endpoint]["get"](data));
}
const api = {
  get: getFunction
};

We define a new endpoint called “categories,” and it gives a list of values based on the “category” it received in the data field.

Next, let’s remove the hardcoded values and populate it on the JavaScript ...