How to access a Structured Web Content from Template Liferay 7

accessing-content-in-template.ftl

<#--
There are several ways of accesing the data stored in a structured web content,
it can be accesible by name, if the field is a main level item,
it can be a repetible content and so we have to access it's siblings,
and it can be a nested field and we have to access it through the parent.
-->

<#-- Structure Example Source (reduced and simplified)
I have deleted a lot of lines to make a Proof of Concept

{
    "defaultLanguageId": "en_US",
    "fields": [
        {
            "label": {
                "en_US": "Dictionary Storage"
            },
            "name": "DStorage",
            "repeatable": true,
            "type": "text",
            "nestedFields": [
                {
                    "label": {
                        "en_US": "Item Key"
                    },
                    "name": "Key",
                    "repeatable": false,
                    "type": "text"
                },
                {
                    "label": {
                        "es_ES": "Item Value"
                    },
                    "name": "Value",
                    "repeatable": false,
                    "type": "text"
                }
            ]
        }
    ]
}
-->

<#-- So let's access the data in a webcontent based on that structure.

1. Accesing it by name -->
${DStorage.getData()}

<#-- that way we access the text item with the name DStorage. 
It is a level 0 item and even being repeatable, 
if it is only one element we can get the data like that.

2. Accesing it when repeated -->
<#if DStorage.getSiblings()?has_content>
    <#list DStorage.getSiblings() as Item >
        ${Item.getData()}
    </#list>
</#if>

<#-- with that snippet we can print all the text data
of all the repeated items of Dictionary Storage.

3. Accessing it when nested -->
<#if DStorage.getSiblings()?has_content>
    <#list DStorage.getSiblings() as Item >
        <p>${Item.getChild('Key').getData()} : {Item.getChild('Value').getData()}</p>
    </#list>
</#if>

<#-- the getChild method gets a string with the name of the child.

That last example is the most complete we can have with that simple structure,
but we can get creative when making a structure and so it can get messy sometimes 
if not properly cared about.
-->