Tutorial: Display Requirements Recursively

Based on the Swagger specifications viewable on this page, the response of /trips v3 includes procedures and restrictions that apply to a particular trip, organized in data.attributes.informationGroups as a list. Each InformationGroup object has a property called groupings that is a list of the type Grouping.
It is important to note that each grouping again may have a property named groupings of type array Grouping, so it is essential to navigate this object recursively to not lose any data in case the API response part that contains procedures & restrictions are nested for multiple level.
Here is a sample code that can render the information in a particular Group on a frontend component

function processGroupings(groupings, htmlElement) {
  groupings.forEach((grouping) => {
    // Use grouping information to display heading, titles, etc.
    htmlElement.innerHTML += `<div class='grouping-name'>${grouping.name}</div>`;

    grouping.data.forEach((requirement) =>
      // Display the requirements a& procedures in the grouping based on the id
      displayRequirement(requirement.id, htmlElement)
    );

    // Call the same function on the child groupings if they exist
    if (grouping.groupings) {
      processGroupings(groupings.groupings, htmlElement);
    }
  });
}

A working example of such a function is used here to display all visa requirements.