How can I show a sub category tag in list and detail view? about news HOT 2 CLOSED

<!-- categories -->
<span class="news-list-category">
    <f:for each="{categories}" as="category" iteration="iteratorCategories">
        <f:if condition="{category.shortcut}">
            <f:then>
                <f:link.action pageUid="{category.shortcut}" arguments="{overwriteDemand:{categories:category.uid}}">{category.title}</f:link.action>
            </f:then>
            <f:else>
                <f:link.action pageUid="{settings.backPid}" arguments="{overwriteDemand:{categories:category.uid}}">{category.title}</f:link.action>
            </f:else>
        </f:if>
        <f:if condition="{iteratorCategories.isLast}">
            <f:then></f:then>
            <f:else>,</f:else>
        </f:if>
    </f:for>
</span>

<f:if condition="{newsItem.categories}">
    <span class="news-list-category">
        <f:for each="{newsItem.categories}" as="category" iteration="iteratorCategories">
            <f:if condition="{category.shortcut}">
                <f:then>
                    <f:link.action pageUid="{category.shortcut}" arguments="{overwriteDemand:{categories:category.uid}}">{category.title}</f:link.action>
                </f:then>
                <f:else>
                    <f:link.action arguments="{overwriteDemand:{categories:category.uid}}">{category.title}</f:link.action>
                </f:else>
            </f:if>
            <f:if condition="{iteratorCategories.isLast}">
                <f:then></f:then>
                <f:else>,</f:else>
            </f:if>
        </f:for>
    </span>
</f:if>

─┬─A─┬─A1
 │   └─A2
 │
 └─B─┬─B1
     ┼─B2
     └─B3

    <f:for each="{news}" as="newsItem" iteration="iterator">
        <!-- render partial="List/ServiceItem" -->
    <div
    <f:if condition="{newsItem.categories}">
				data-groups="[<f:for each="{newsItem.categories}" as="category" iteration="iteratorCategories">'{category.title}'<f:if condition="{iteratorCategories.isLast}"><f:then></f:then><f:else>,</f:else></f:if></f:for>]"
			</f:if>
    >{newsItem.title} & other stuff</div>
    </f:for>

    <div class="news-list-category"> categories:
      <f:for each="{categories}" as="category" iteration="iteratorCategories">
        <f:if condition="{category.title} == 'B'">
          {category.title}
           <f:debug>{category.children}</f:debug>
           <f:if condition="{category.children}">
                children:
                <f:for each="{category.children}"
                          as="subCategory"
                           iteration="iteratorSubCategories">
                     <span>{subCategory.title}</span>
                 </f:for>
              </f:if>
         </f:if>
      </f:for>
    </div>

 <f:cObject typoscriptObjectPath="lib.myTyposSubCategoryList" />