CODEWITHSUNDEEP
javaspringspring-bootspring-mvcthymeleaf
Vy Do
Vy Do

Reputation: 52508

Thymeleaf display field of object of a list

I have

<table style="padding-top: 15px; padding-left: 50px; width: 1366px;">
    <tr>
        <thead>
        <th>STT</th>
        <th width="24%">Số tài khoản</th>
        <th width="24%">Tên ngân hàng</th>
        <th width="24%">Chi nhánh</th>
        <th width="24%">Tỉnh/TP của ngân hàng</th>
        </thead>
        <tbody>
        <tr th:each="item, itemStat : ${accountObjectForm.accountObjectBankAccountList}">
            <td><span th:text="${itemStat.index + 1}"></span></td>
            <td><input type="text" th:value="${accountObjectForm.accountObjectBankAccountList[0].bankAccount}" th:name="|accountObjectBankAccountList[${itemStat.index}].bankAccount|" th:id="|accountObjectBankAccountList[${itemStat.index}].bankAccount|" class="k-textbox" style="width: 100%;"></td>
            <td><input type="number" th:name="|accountObjectBankAccountList[${itemStat.index}].bankId|" th:id="|accountObjectBankAccountList[${itemStat.index}].bankId|" class="k-textbox" style="width: 100%"></td>
            <td><input type="text" th:name="|accountObjectBankAccountList[${itemStat.index}].bankBranchName|" th:id="|accountObjectBankAccountList[${itemStat.index}].bankBranchName|" class="k-textbox" style="width: 100%;"></td>
            <td><input type="text" th:name="|accountObjectBankAccountList[${itemStat.index}].province|" th:id="|accountObjectBankAccountList[${itemStat.index}].province|" class="k-textbox" style="width: 100%;"></td>
        </tr>
        <script>
            $(document).ready(function () {
                var dataBank = new kendo.data.DataSource({
                    transport: {
                        read: {
                            url: "/banks_json",
                            dataType: "json"
                        }
                    },
                    pageSize: 30
                });

                $("input[name$='bankId']").each(function() {
                    $(this).kendoDropDownList({
                        optionLabel: "Chọn...",
                        dataTextField: "bankCode",
                        dataValueField: "id",
                        dataSource: dataBank,
                        index: 0,
                        change: onChangeBank
                    })
                });

                var dataProvinceBank = new kendo.data.DataSource({
                    transport: {
                        read: {
                            url: "/provinces",
                            dataType: "json"
                        }
                    },
                    pageSize: 300
                });

                $("input[name$='province']").each(function() {
                    $(this).kendoDropDownList({
                        optionLabel: "Chọn...",
                        dataTextField: "text",
                        dataValueField: "value",
                        filter: "contains",
                        dataSource: dataProvinceBank,
                        index: 0,
                        change: onChangeProvinceBank
                    })
                });
            });
            function onChangeBank() { }
            function onChangeProvinceBank() { }
        </script>
        </tbody>
    </tr>
</table>

result enter image description here

(Open image in new tab for see bigger screenshot)

Under the hood enter image description here

I try 

<td><input type="text" th:value="${accountObjectForm.accountObjectBankAccountList[${itemStat.index}].bankAccount}" th:name="|accountObjectBankAccountList[${itemStat.index}].bankAccount|" th:id="|accountObjectBankAccountList[${itemStat.index}].bankAccount|" class="k-textbox" style="width: 100%;"></td>

but error, the page cannot render to html when catch these line of code.

I use 0 for a holder. Please help me change the number 0 by index of list.

th:value="${accountObjectForm.accountObjectBankAccountList[0].bankAccount}"

Upvotes: 0

Views: 823

Answers (2)

Vy Do
Vy Do

Reputation: 52508

An another solution

<td><input type="text" th:value="${accountObjectForm.accountObjectBankAccountList[__${itemStat.index}__].bankAccount}" th:name="|accountObjectBankAccountList[${itemStat.index}].bankAccount|" th:id="|accountObjectBankAccountList[${itemStat.index}].bankAccount|" class="k-textbox" style="width: 100%;"></td>

Upvotes: 1

Vasily Liaskovsky
Vasily Liaskovsky

Reputation: 2528

Omit inner ${...} braces in your expressions, refer to itemStat.index directly. You are already using thymeleaf expression syntax, no need to use it twice.

Not sure if this is the only problem with your code, but surely first to fix

Upvotes: 2

Related Questions