# Menu-based Content

This guide explains how to build a navigation tree for streaming content using the Playout API. The process involves fetching episode data, retrieving menu groups, and constructing a hierarchical navigation structure.

## General Flow

1. **Fetch Episode Data**: Use the `/get/episodes` endpoint to search for episodes and filter results to find the desired `episodeId`.
2. **Retrieve Menu Groups**: Use the `GET /playouts/{playoutId}/episodes/{episodeId}/groups` endpoint to fetch menu groups associated with the episode.
3. **Build Navigation Tree**: Start with the group marked as `mainMenu: true` and recursively link related items and subgroups to construct the tree.
4. **Handle Subitems**: Check for the existence of subitems to determine whether a group should be displayed or made clickable.


## Example Code

The following example demonstrates how to fetch and process data to create a hierarchical menu structure for streaming content:


```javascript
// Step 1: Fetch episode data
async function fetchEpisodeId(apiBaseUrl, searchParams) {
  const response = await fetch(`${apiBaseUrl}/get/episodes?${new URLSearchParams(searchParams)}`);
  const episodes = await response.json();
  // Filter to find the desired episode
  const episode = episodes.find(ep => ep.title.includes("desired-title"));
  return episode ? episode.id : null;
}

// Step 2: Fetch menu groups
async function fetchMenuGroups(apiBaseUrl, playoutId, episodeId) {
  const response = await fetch(`${apiBaseUrl}/playouts/${playoutId}/episodes/${episodeId}/groups`);
  return response.json();
}

// Step 3: Build navigation tree
function buildNavigationTree(groups) {
  const mainMenu = groups.find(group => group.mainMenu);
  if (!mainMenu) return null;

  function buildTree(group) {
    return {
      id: group.id,
      name: group.name,
      subItems: group.subGroups.map(subGroupId => {
        const subGroup = groups.find(g => g.id === subGroupId);
        return buildTree(subGroup);
      }),
    };
  }

  return buildTree(mainMenu);
}

// Example usage
(async () => {
  const apiBaseUrl = "https://api.jayplatform.com";
  const playoutId = "12345";
  const searchParams = { filter: "desired-filter" };

  const episodeId = await fetchEpisodeId(apiBaseUrl, searchParams);
  if (!episodeId) {
    console.error("Episode not found");
    return;
  }

  const groups = await fetchMenuGroups(apiBaseUrl, playoutId, episodeId);
  const navigationTree = buildNavigationTree(groups);

  console.log("Navigation Tree:", JSON.stringify(navigationTree, null, 2));
})();
```

## Recommendations

- Check the existence of sub-items to decide if a group should be shown or clickable.
- Groups can also have sub-groups, which should be recursively processed.


## See Also

- [How to Fetch Data](/platform/how-to/fetch-data)
- [How to Show Products](/platform/how-to/show-products)