Displaying an Array of Data

Detailed Explanation

The data above is an array of results, where each object has a title field and somePoints field. We want to display the title of each result as well as all of its points. To do that, we create an appTile object in the appTiles array. The appTile object has an array of items, which are the UI components that are shown in each card. Each item in the array of results will be mapped over and return an appTile as defined in the schema.

First, we have a component object with the type title, and the title component has a mandatory field named text. To dynamically show each result's title in the title component, we use a templating helper {{ title }}. This helper will be replaced with the value of the field title in the results.

Second, we have a layout_list with the field property of {{ somePoints }}. Similar to the templating helper in the title component, {{ somePoints }} will return the value of the field somePoints in the results. layout_list will then map over the array and render a paragraph component for each point.