When working with the metadata tree, you have two data structures to your convenience:

In the following you will find two examples of how to use the metadata tree. Suppose that the FTL templates on the CAE side have been prepared to include metadata about content. At different points throughout the FTL templates the code might look as follows:

...
<#assign contentMetadata = { "contentInfo": {
  "title": self.content.title,
  "keywords": self.content.keywords }
}/>

<div <@preview.metadata contentMetadata />>
  ...
</div>
...

For more details on how to include metadata in FTL templates, please refer to the documentation Section 6.5.2, “Preview (preview)” in Frontend Developer Manual.

In a preview content item there might be multiple of such content-related metadata chunks attached to different DOM nodes. Suppose you want to gather the titles of all the contents that are included in such metadata chunks. One way to gather these titles in an array is the following:

import MetadataTree from "@coremedia/studio-client.main.editor-components/sdk/preview/metadata/MetadataTree";
import MetadataTreeNode from "@coremedia/studio-client.main.editor-components/sdk/preview/metadata/MetadataTreeNode";

//...
const metadataService = null;
const metadataTree:MetadataTree = metadataService.getMetadataTree();
const result = [];
let nodesToProcess = metadataTree.getRoot() ? [metadataTree.getRoot()] : [];

let arrayIndex = 0;
while (arrayIndex < nodesToProcess.length) {
  const currentNode:MetadataTreeNode = nodesToProcess[arrayIndex];
  if (currentNode.getProperty("contentInfo")) {
    const title = currentNode.getProperty("contentInfo").title;
    result.push(title);
  }
  if (currentNode.getChildren()) {
    nodesToProcess = nodesToProcess.concat(currentNode.getChildren());
  }
  arrayIndex++;
}

In this example, the whole metadata tree is traversed in a breadth-first manner. For each node it has to be checked whether it has the contentInfo property as there might be metadata nodes with completely other information.

The code can be simplified considerably if a filtered metadata tree is retrieved:

const metadataService = ... ;
const metadataTree = metadataService.getMetadataTree(["contentInfo"]);
let result = [];
const metadataNodesList = metadataTree.getAsList();
metadataNodesList.forEach((node:MetadataTreeNode) => {
  result.push(node.getProperty("contentInfo").title);
});

In this case, the metadata tree is filtered on retrieval, namely for metadata nodes that contain the contentInfo property. Now it is sufficient to get all metadata tree nodes as an array, walk through it and gather the content titles.