CODEWITHSUNDEEP
springrestspring-bootthymeleaf
praneeth
praneeth

Reputation: 223

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?

Upvotes: 3

Views: 20889

Answers (2)

Neptunus
Neptunus

Reputation: 71

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.

Upvotes: 3

Jaume Mor&#243;n i Tarrasa
Jaume Mor&#243;n i Tarrasa

Reputation: 689

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.

Upvotes: 1

Related Questions