Why is the information from my database (mysql) not showing on my html template? This is a springboot application using thymeleaf

Question

This is the class that creates the entity in the mysql database:

package io.rhd.itdepartment.models;
import java.util.Base64;
import java.util.Date;
import javax.persistence.Column;
import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;
import javax.persistence.Table;

import lombok.AllArgsConstructor;
import lombok.Getter;
import lombok.NoArgsConstructor;
import lombok.Setter;

/**
 * @author J
 *
 */

@Entity
@Table(name="admin_user")
@AllArgsConstructor
@NoArgsConstructor
@Getter
@Setter
public class AdminUser {
@Id
@GeneratedValue(strategy=GenerationType.AUTO)
private int id;

@Column(name="user_image")
private byte[] userImage;

@Column(name="user_name")
private String name;

private String requestID;
private String deviceType;
private Date requestDate;
private String issueDetails;
private String status;


}

this is the Service class package io.rhd.itdepartment.services;

import java.util.List;
import java.util.Optional;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import io.rhd.itdepartment.models.AdminUser;

import io.rhd.itdepartment.repositories.AdminUserRepository;

@Service
public class AdminUserService {
@Autowired
private AdminUserRepository adminUserRepository;


//return list of adUsers
public List<AdminUser> getEntries(){
    //return adminUserRepository.findAll();
    return (List<AdminUser>) adminUserRepository.findAll();
}

//save new adUser
public void save(AdminUser adUser) {
    adminUserRepository.save(adUser);
}

//return adUser item by id
public Optional<AdminUser> findById(int id){
    return adminUserRepository.findById(id);
}

public void delete(int id) {
    // TODO Auto-generated method stub
    adminUserRepository.deleteById(id);
    
}

}

The controller class is as follows:

package io.rhd.itdepartment.controllers;

import java.util.List;
import java.util.Optional;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;

import io.rhd.itdepartment.models.AdminUser;
import io.rhd.itdepartment.services.AdminUserService;

@Controller
public class AdminUserController {
@Autowired
private AdminUserService adminUserService;

@GetMapping("/index")
public String goToEntriesPage(Model model) {

    List<AdminUser> returnEntries = adminUserService.getEntries();
    model.addAttribute("entries", returnEntries);
    return "index"; //the html page to return
}

@PostMapping("/index/addNew")
public String addNew(AdminUser adUser) {
    adminUserService.save(adUser);
    return "redirect:/index";
}

@RequestMapping("/index/findById")
@ResponseBody//return on the modal popup page
public Optional<AdminUser> findById(int id) {
    return adminUserService.findById(id);
    
}

//parse submitted modal form update to database
@RequestMapping(value="/index/update", method = {RequestMethod.PUT, RequestMethod.GET})
public String update(AdminUser country) {
    adminUserService.save(country);
    return "redirect:/index";
}

//delete country item
@RequestMapping(value="/index/delete", method = {RequestMethod.DELETE, RequestMethod.GET})
public String delete(Integer id) {
    adminUserService.delete(id);
    return "redirect:/index";
}

}

And finally, this is how is it parsed in the html template:

 <div class="row">
          <div class="col-md-12 grid-margin stretch-card">
            <div class="card">
              <div class="card-body">
                <div class="d-sm-flex align-items-center mb-4">
                  <h4 class="card-title mb-sm-0">Request Summary</h4>
                  <a href="#" class="text-dark ml-auto mb-3 mb-sm-0"> View all Requests</a>
                </div>
                <div class="table-responsive border rounded p-1">
                 <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#addModal" data-whatever="@mdo">Add Entry</button>
                
                  <table class="table">
                    <thead>
                      <tr>
                      <th class="font-weight-bold">ID</th>
                        <th class="font-weight-bold">Personnel</th>
                        <th class="font-weight-bold">Request ID</th> 
                        <th class="font-weight-bold">Device Type</th>
                        <th class="font-weight-bold">Request Date</th>
                        <th class="font-weight-bold">Issue Details</th>
                        <th class="font-weight-bold">Status</th>
                        <th class="font-weight-bold">Actions</th>
                      </tr>
                    </thead>
                    <tbody>
                    <tr th:each="adminuser:${entries}">
                            <td th:text="${user.id}"></td>
                           <td th:text="${adminuser.userImage}"></td>
                            <td th:text="${adminuser.name}"></td>
                            <td th:text="${adminuser.requestID}"></td>
                            <td th:text="${adminuser.deviceType}"></td>
                           <td th:text="${adminuser.requestDate}"></td>
                           <td th:text="${adminuser.issueDetails}"></td>
                           <td th:text="${adminuser.status}"></td>

                    </tr>
                    </tbody>
                  </table>
                </div><hr>
                <div class="d-flex mt-4 flex-wrap">
                  <p class="text-muted">Showing 1 to 10 of - entries</p>
                  <nav class="ml-auto">
                    <ul class="pagination separated pagination-info">
                      <li class="page-item"><a href="#" class="page-link"><i class="icon-arrow-left"></i></a></li>
                      <li class="page-item active"><a href="#" class="page-link">1</a></li>
                      <li class="page-item"><a href="#" class="page-link">2</a></li>
                      <li class="page-item"><a href="#" class="page-link">3</a></li>
                      <li class="page-item"><a href="#" class="page-link">4</a></li>
                      <li class="page-item"><a href="#" class="page-link"><i class="icon-arrow-right"></i></a></li>
                    </ul>
                  </nav>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

When i run the above, no information displays in the columns on the html template.

What am I doing wrong?

Answer 1

Problem is iteration in your thymeleaf. Here down userEntries: ${entries} attribute value you see means for each element in the result of evaluating ${entries} , repeat this fragment of template, using the current element in a variable called userEntries . Let's give a name each of the things we see:

1. We will call ${entries} the iterated expression or iterated variable.

2. We will call userEntries the iteration variable or simply iteration variable.

Structure

<th:block th:each="iteration_variable: ${variable}">
   <span th:text="${iteration_variable.variable_from_entity}"></span>
   <span th:text="${iteration_variable.variable_from_entity}"></span>
</th:block>

Here down is code

<tr th:each="userEntries : ${entries}">
    <td th:text="${userEntries.id}"></td>
    <td th:text="${userEntries.userImage}"></td>
    <td th:text="${userEntries.name}"></td>
    <td th:text="${userEntries.requestID}"></td>
    <td th:text="${userEntries.deviceType}"></td>
    <td th:text="${userEntries.requestDate}"></td>
    <td th:text="${userEntries.issueDetails}"></td>
    <td th:text="${userEntries.status}"></td>
</tr>