Search code examples
htmlthymeleaf

How to loop data into textarea thymeleaf?


Do you know how can we loop data into textarea in thymeleaf? Please you help to me a sample or any suggestion to do this. Thanks.

  1. java code
    @GetMapping("/import_billing")
    public String getImportBilling(Model model) {
        model.addAttribute("importBilling", new ImportBilling());
        return "importBilling";
    }

    @PostMapping("/import_billing")
    public String postImportBilling(ImportBilling request, Model model, BindingResult result) {
        if (result.hasErrors()) {
            for (FieldError error : result.getFieldErrors()) {
                System.out.println(error.getField() + ": " + error.getDefaultMessage());
            }
            model.addAttribute("importBilling", request);
            return "importBilling";
        }
        ApiResponse response = cardHolderService.importBillingData(request);
        model.addAttribute("response", response.getData());
        return "importBilling";
    }
  1. Html code
<div class="container-fluid" layout:fragment="content">
    <div class="card shadow mb-4">
        <div class="collapse show" id="collapseCardExample">
            <div class="card-body">
                <form class="page-information" th:action="@{/import_billing}" th:object="${importBilling}"
                      method="post">
                    <div class="row">
                        <div class="col-md-4">
                            <input type="number"           
                                   th:value="*{from}"/>
                        </div>
                        <div class="col-md-4">
                            <input type="number"
                                   th:value="*{to}"/>
                        </div>
                        <div class="form-group col-md-4">
                            <button class="btn btn-primary" type="submit">
                                <i id="_spinner">Execute</i>
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <label>Output console</label>
    <div class="card shadow mb-4">
        <div class="card-body">
            <div class="chart-area">
                <div class="form-group" th:each="temp:*{response}" >
                    <textarea class="form-control" id="exampleFormControlTextarea1" rows="5"  th:text="${temp}"/>></textarea>
                </div>
            </div>
        </div>
    </div>
</div>

In this case, after on click button Execute I would like all response display in textarea


Solution

  • Use th:inline="text" and write your loop using textual syntax. For example, instead of:

    <div class="form-group" th:each="temp:*{response}" >
      <textarea class="form-control" id="exampleFormControlTextarea1" rows="5"  th:text="${temp}"/>></textarea>
    </div>
    

    Do this:

    <div class="form-group">
      <textarea class="form-control" id="exampleFormControlTextarea1" rows="5" th:inline="text">
        [# th:each="temp: *{response}"]
          [[${temp}]]
        [/]
      </textarea>
    </div>