How We Can Bind A List Of A List Of Object Using Thymeleaf

I have a form where the user can add as much as he want of Table object that also can contains as much as he want of Columns object (like building tables in SQL).. I've tried the c

Solution 1:

Your approach is okay. But you need to fix a few things.

In the getTable method, you are setting empty lists for tables and columns. So there is nothing to iterate over in the view layer to show the form. Change to:

@ModelAttribute("page")public Page getTable() {
    Columncolumn=newColumn();
    List<Column> columns = newArrayList<>();
    columns.add(column);

    Tabletable=newTable();
    table.setColumns(columns);

    List<Table> tables = newArrayList<>();
    tables.add(table);

    Pagepage=newPage();
    page.setTables(tables);

    return page;
}

And

Add missing } for th:field="*{tables[__${i.index}__].name" and close this input tag.

NOTE: I am not sure how you wanted to handle the three select inputs. I tested omitting them, meaning, keeping only Columnid and name in the form, data bind without any issue in that case.

Also I didn't check your JS, as you have mentioned that you haven't tested it yet.

Suggestions: I see you are returning a view name from your POST handler. Take a look at the following article on Wikipedia.

Post/Redirect/Get