Expand my Community achievements bar.

Accessing a complex TreeMap Structure in HTL

Avatar

Level 2

Hi everyone,

 

I have a complex data structure (TreeMap) developed in a Java class that systematically splits a string and assigns different values to nested Lists and HashMaps. The implementation is successful in the backend so far with the structure definition shown below.

 

Dropping the variable declaration here as well. 

 

private Map<String, List<Map<String, Map<String, List<Map<String, String>>>>>>
listOfRecommendedProducts = new TreeMap<>();

 

Debugging instance screenshot

kashyap691_1-1723526200190.png

 

Below is the HTL implementation for the same. Before I explain the problem, dropping some context here. The first line has categoryList.index mentioned while looping the initial list, there are certain categories of a product from which default is shown on the page while others are hidden until user makes a selection. I had to get the index here while looping the list in order to only show the details with the corresponding category on the page.

 

The Issue - So far, I am able to get the details on the page where '<p>${recomProductInnerpropertiesSecondMap}</p>' is last mentioned in the below code. Post that there is a nested ArrayList that has final set of Hashmap key and values (Marked in blue dots in the above screenshot) that I am not able retrieve on the page. I've tried debugging the HTL code several times, interchanging values or printing keys and values together but could not find a solution for it.

 

Would be great help if someone can help figure out as this is quite custom and there is no solution I could find online.

 

<sly data-sly-list.recomProducts="${solutionDetailObj.listOfRecommendedProducts.keySet.iterator[categoryDetailsList.index]}">
<sly data-sly-list.recomProductproperties="${solutionDetailObj.listOfRecommendedProducts[recomProducts]}">
<sly data-sly-list.recomProductInnerpropertiesFirstMap="${recomProductproperties.keySet.iterator}">
<sly data-sly-list.recomProductInnerpropertiesSecondMap="${recomProductproperties[recomProductInnerpropertiesFirstMap]}">
<div class="--UI classes--">
<div class="--UI classes--">
<div class="--UI classes--">
<img src="${recomProductInnerpropertiesFirstMap}" alt="${recomProductInnerpropertiesSecondMap}" class="subaccordion__icon">
<p>${recomProductInnerpropertiesSecondMap}</p>
</div>
<div class="--UI classes--">
--more content--
</div>
</div>
<div class="--UI classes--">
<ul>
<sly data-sly-list.recomProductItems="${recomProductInnerpropertiesFirstMap[recomProductproperties[recomProductInnerpropertiesFirstMap]]}">
<sly data-sly-list="${recomProductItems.keySet.iterator}">
<li>
<a href="${item}">${recomProductItems[item]}</a>
</li>
</sly>
</sly>
</ul>
</div>
</div>
</sly>
</sly>
</sly>
</sly>

 

Thanks,

Kashyap

2 Replies

Avatar

Community Advisor

Hi @kashyap691 ,

The data structure is little complex and it would be great to look into the output in UI as what you getting so far but for final set of list, can you try to iterate in below format:

    <div data-sly-list="${Object.List}">
            <p> valueA: ${item.valueA} </p>
            <p> valueB: ${item.valueB}</p>        
        </div>

 

 

-Tarun

Avatar

Level 2

Hi Tarun,

 

Thanks for replying. This is what the output looks like. TreeMap starts with the title on top, The 2 subcategories correspond to a first list with integer value as a key. First nested Map correspond to the Mnemonics for each Outer Product with image src link as key and value as second nested Map. Second Nested Map contains the text for Outer product name as key and value as the second nested List. Second Nested List has final Hashmap that has key as text value of items under the product with the hyperlinks as the value for the same text.

 

kashyap691_0-1723548460190.png