Render List Of List in HTL Slightly

Question

I have a table and need to render its rows and columns. I am able to see the data properly on CRXDE Lite but I am unable to render it on HTL.

Here are the java classes:

public class Table {
    
        @ChildResource
        private List<TableRow> tableRowList;
    }
    
    public class TableRow
    {
        @ValueMapValue
        private String key;
        @ChildResource
        private List<TableColumn> tableColumnList;
    }
    
    public class TableColumn
    {
        @ValueMapValue
        private String colValue;
    }

Here's the simplified HTL:

<sly data-sly-use.model="models.Table"
    <table class="table">
            <tbody>
            <sly data-sly-list="${model.tableRowList}">
                <tr>
                    <th>${item.key @context='html'}</th>
                    <th data-sly-repeat.colValue="${item.tableColumnList}">${colValue @context='html'}</th>
                </tr>
            </sly>
            </tbody>
        </table>
</sly>

The key is rendered properly, but not the column list for each row. When I checked CRXDE, the data is being stored as expected.

Any idea what went wrong?

Answer 1

You need to explicitly invoke the colValue property on the TableColumn, I refactored your HTL/Sightly snippet to better show which variable is what type/class:

<table class="table" data-sly-use.table="models.Table">
    <tbody>
        <tr data-sly-repeat.tableRow="${table.tableRowList}">
            <th>${tableRow.key @context='html'}</th>
            <th data-sly-repeat.tableColumn="${tableRow.tableColumnList}">${tableColumn.colValue @context='html'}</th>
        </tr>
    </tbody>
</table>

PS: I strongly advise you do not access private properties like that but rather expose them publicly through getters.