i want to use thymeleaf in springboat to show several <div> tags

70 Views Asked by At

i want to get several data from table and put them into array and then in html file, i want to get data from the array ussing th:each (sorry for the mess. it is my first time using stack overflow. i will findout better way)

this is code i wrote in controller

    List<String> res_num_list = new ArrayList<String>();
    res_num_list.add("3");
    res_num_list.add("4");

    List<String> hotel_id_list = new ArrayList<String>();
    hotel_id_list.add("3");
    hotel_id_list.add("4");

    List<String> price_list = new ArrayList<String>();
    price_list.add("3");
    price_list.add("4");

    List<String> date_num_list = new ArrayList<String>();
    date_num_list.add("3");
    date_num_list.add("4");

    List<String> inq_date_list = new ArrayList<String>();
    inq_date_list.add("20000101");
    inq_date_list.add("20000101");

    List<String> category_list = new ArrayList<String>();
    category_list.add("hotel");
    category_list.add("hotel");

    List<String> room_list = new ArrayList<String>();
    room_list.add("standard");
    room_list.add("standard");
    
    List<String> people_list = new ArrayList<String>();
    people_list.add("2");
    people_list.add("2");
    
    
    List<String> testList = Arrays.asList("res_num_list", "hotel_id_list", "price_list",
            "date_num_list","inq_date_list","category_list","room_list","people_list");
    model.addAttribute("testArray", testList);

and this is what i wrote in html

                            <div th:each="testItem : ${testArray}”>
                             <div class="review">
                                <div class="row">
                                    <!--end col-md-3-->
                                    <div class="col-md-9" >
                                        <div class="comment">
                                        
                                            <div class="comment-title">
                                                <h4>
                                                    <td th:text="${testItem.hotel_name}"></td>
                                                </h4>
                                                
                                            </div>
                                            <dl class="visitor-rating">
                                                
                                                <dt>room type</dt>
                                                <dd><td th:text="${testItem.room_list}"></td></dd>
                                                
                                                <dt>reservation date</dt>
                                                <dd><td th:text="${testItem.inq_date_list}"></td></dd>
                                                
                                                <dt>staying date</dt>
                                                <dd><td th:text="${testItem.date_num_list}"></td></dd>
                                                
                                                <dt>numper of people</dt>
                                                <dd><td th:text="${testItem.people_list}"></td></dd>
                                                
                                                <dt>request</dt>
                                                <dd><textarea name="request" cols="55" rows="3"></textarea></dd>
                                                
                                            </dl>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            </div>

when i try to use th:each, it does not show up on chrome but when i remove the th:each, it does show up and i don't know why anyone possibly explain why?

1

There are 1 best solutions below

1
John Williams On BEST ANSWER

The following will work:

Controller.

@GetMapping("/reservation")
public String reservation(Model model) {
    Map<String, String> row1 = new HashMap<>();
    row1.put("hotel_name", "Claridges");
    row1.put("res_num", "3");
    row1.put("hotel_id", "3");
    row1.put("price", "3");
    row1.put("date_num", "3");
    row1.put("inq_date", "20000101");
    row1.put("category", "hotel");
    row1.put("room", "standard");
    row1.put("people", "2");

    
    Map<String, String> row2 = new HashMap<>();
    row2.put("hotel_name", "Dorchester");
    row2.put("res_num", "3");
    row2.put("hotel_id", "3");
    row2.put("price", "3");
    row2.put("date_num", "3");
    row2.put("inq_date", "20000101");
    row2.put("category", "hotel");
    row2.put("room", "standard");
    row2.put("people", "2");
    
    
    List<Map<String, String>> testList = Arrays.asList(row1, row2);
    model.addAttribute("testArray", testList);
    
    return "reservations";
}

reservations.html

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
                        <div th:each="testItem : ${testArray}">
                         <div class="review">
                            <div class="row">
                                <!--end col-md-3-->
                                <div class="col-md-9" >
                                    <div class="comment">
                                    
                                        <div class="comment-title">
                                            <h4>
                                                <td th:text='${testItem.hotel_name}'></td>
                                            </h4>
                                            
                                        </div>
                                        <dl class="visitor-rating">
                                            
                                            <dt>room type</dt>
                                            <dd><td th:text="${testItem.room}"></td></dd>
                                            
                                            <dt>reservation date</dt>
                                            <dd><td th:text="${testItem.inq_date}"></td></dd>
                                            
                                            <dt>staying date</dt>
                                            <dd><td th:text="${testItem.date_num}"></td></dd>
                                            
                                            <dt>numper of people</dt>
                                            <dd><td th:text="${testItem.people}"></td></dd>
                                            
                                            <dt>request</dt>
                                            <dd><textarea name="request" cols="55" rows="3"></textarea></dd>
                                            
                                        </dl>
                                    </div>
                                </div>
                            </div>
                        </div>
                        </div>

But adding a Reservation class and using it in the Controller is actual OOP.

Reservation

public class Reservation {
    

public Reservation(String hotel_name, String res_num, String hotel_id, String price, String date_num,
        String inq_date, String category, String room, String people) {
    super();
    this.hotel_name = hotel_name;
    this.res_num = res_num;
    this.hotel_id = hotel_id;
    this.price = price;
    this.date_num = date_num;
    this.inq_date = inq_date;
    this.category = category;
    this.room = room;
    this.people = people;
}
public String hotel_name;
public String res_num;
public String hotel_id;
public String price;
public String date_num;
public String inq_date;
public String category;
public String room;
public String people;

}

Updated Controller

@GetMapping("/reservation")
public String reservation(Model model) {
    Reservation res1 = new Reservation("Claridges", "3", "3", "3", "3", "20000101", "hotel", "standard", "2");
    Reservation res2 = new Reservation("Dorchester", "3", "3", "3", "3", "20000101", "hotel", "standard", "2");
        
    
    List<Reservation> testList = Arrays.asList(res1, res2);
    model.addAttribute("testArray", testList);
    
    return "reservations";
}

No change is required to the html page.