如何使用 Thymeleaf 模板从 Json 加载数据答案

【问题标题】：How to Load Data From a Json Using Thymeleaf Template如何使用 Thymeleaf 模板从 Json 加载数据
【发布时间】：2019-07-29 05:06:11
【问题描述】：

我有一个 rest api 返回一个 Json 值作为服务调用的输出。

例如：- https://localhost:8080/getEmployees/loadAll

这将返回以下 json 值例如：-

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

我需要将以下 json 值加载到我的 thymeleaf 表中。在正常情况下，使用 spring 中的模式在控制器中返回值可以将值返回为列表，如下所示。

<!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>

有没有办法通过上面的 json 使用 thymeleaf 来完成这个？

【问题讨论】：

标签： spring rest spring-boot thymeleaf

【解决方案1】：

您可以使用以下结构执行类似的操作。

当你调用服务时

https://localhost:8080/getEmployees/loadAll

您需要使用 model.addAttribute 传递员工数据。

例如，假设您有以下方法：

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

上述方法，只有在你使用以下url拨打电话时才会执行：https://localhost:8080/getEmployees/loadAll 它会将您的empList 数据添加为属性。然后，返回字符串指示将加载的页面的名称。您需要使用您自己的页面和 thymeleaf 代码。

<!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>

现在，thymeleaf 将能够显示给定的数据。

【讨论】：

您好，感谢您的回答当添加到模型属性时，我从那里调用我的服务localhost:8080/getEmployees/loadAll 对吗？那么我是否必须获取该 json 值并创建一个数组列表以传递给 thymeleaf？
没错，您需要调用您的服务来获取您的 JSON 值，将它们传递给 ArrayList，然后使用模型属性将该数组列表传递给 thymeleaf。

【解决方案2】：

我觉得你有点困惑。 Thymeleaf 模板在服务器端编译生成 html 代码。然后，在客户端没有找到 thymeleaf 代码。

api响应得到的json数据是在客户端生成的。

一种方法是使用 javascript 将 api 响应数据加载到 html 表中。

您可以采取的另一种方法是修改调用 thymeleaf 模板以获取 JSon 值的控制器。如果您存储此响应（在示例中名为 empList 的对象列表中），您可以将该对象作为模板属性添加到控制器响应（Model 或 ModelAndView 对象）中。

【讨论】：

您好，感谢您的回复。所以你说如果我想使用 java-script 请求将 json 数据加载到表中获取数据并使用 java-script 动态生成 HTML 表对吗？
没错。您可以使用数据表 (datatables.net) 来打印表格。加载数据比 html 表格更容易。
我正在使用我自己的模板。非常感谢您提供的信息，我将尝试 datatables.net .. :)