Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to Load Data From a Json Using Thymeleaf Template

I have a rest api returns a Json value as a Output of the service call.

eg:- https://localhost:8080/getEmployees/loadAll

this returns following json values eg:-

{
"employees":[
  {"firstName":"John", "lastName":"Doe"},
  {"firstName":"Anna", "lastName":"Smith"},
  {"firstName":"Peter", "lastName":"Jones"}
]
}

I need to load the following json values to my thymeleaf table. In normal way returning values in controller using modal in spring can retun values as list like following.

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="ISO-8859-1">
<title>Employee List</title>
</head>
<body>
 <h1>Welcome</h1>
 <br>
 <h3>Employee List</h3>
 <br />
 <table border="1">
  <tr>
   <td>Employee First Name</td>
   <td>Employee Last Name</td>
  </tr>
  <tr th:each="emp : ${empList}">
   <td th:text="${emp.firstName}">First Name</td>
   <td th:text="${emp.name}">Last Name</td>
  </tr>
 </table>
</body>
</html>

is there a way to accomplish this using above json using thymeleaf?

like image 958
praneeth Avatar asked Dec 19 '25 03:12

praneeth


2 Answers

You can do something like that using the following structure.

When you call the service

https://localhost:8080/getEmployees/loadAll

you will need to pass the employees data using model.addAttribute.

For instance, let's say you have the following method:

@RequestMapping(value="/getEmployees/loadAll")
String getAllEmployees(Model model) {
    model.addAttribute("empList", <your service here that generates the data>);
    return "pagenamehere";
}

The above method, will only be executed when you make a call using the following url: https://localhost:8080/getEmployees/loadAll and it will add your empList data as an attribute. Then, the return string indicates the name of the page that will load. You will need to use your own page with the thymeleaf code.

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="ISO-8859-1">
<title>Employee List</title>
</head>
<body>
 <h1>Welcome</h1>
 <br>
 <h3>Employee List</h3>
 <br />
 <table border="1">
  <tr>
   <td>Employee First Name</td>
   <td>Employee Last Name</td>
  </tr>
  <tr th:each="emp : ${empList}">
   <td th:text="${emp.firstName}">First Name</td>
   <td th:text="${emp.lastNname}">Last Name</td>
  </tr>
 </table>
</body>
</html>

Now, thymeleaf will be able to display the given data.

like image 195
Neptunus Avatar answered Dec 21 '25 21:12

Neptunus


I think that you are a little confused. Thymeleaf templates are compiled on server side generating html code. Then, no thymeleaf code found on client side.

The json data got of the api response is generated on client side.

One way is use javascript to load the api response data into a html table.

Another way can you take is modify the controller that calls to the thymeleaf template to get the JSon value. If you store this response (on an object List named empList on your example) yo can add the object into the Controller response (Model or ModelAndView objects) as a template attribute.

like image 31
Jaume Morón i Tarrasa Avatar answered Dec 21 '25 19:12

Jaume Morón i Tarrasa



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!