如何在Thymeleaf页面展示REST API返回的无大括号格式化值？

你当前的代码直接把API返回的JSON字符串传递给页面，所以会显示包含大括号的完整JSON内容。要实现无大括号的格式化展示，有以下几种可行方案：

方案1：将JSON转换为实体类（推荐） #

先根据API返回的JSON结构创建对应的Java实体类，让RestTemplate直接将响应转换为实体对象，这样页面可以直接调用对象的属性展示。

步骤1：创建实体类 #

假设API返回的JSON结构如下：

{
  "street": "XX街道",
  "city": "XX市",
  "zipCode": "123456"
}

对应的实体类：

public class Indirizzo {
    private String street;
    private String city;
    private String zipCode;

    // 生成getter、setter方法
    public String getStreet() { return street; }
    public void setStreet(String street) { this.street = street; }
    public String getCity() { return city; }
    public void setCity(String city) { this.city = city; }
    public String getZipCode() { return zipCode; }
    public void setZipCode(String zipCode) { this.zipCode = zipCode; }
}

步骤2：修改Controller代码 #

将getForObject的返回类型改为实体类，传递实体对象到页面：

@GetMapping("/api")
public String getIndirizzo(Model model) {
    String uri = "http://localhost:8081/api/byid/1";
    RestTemplate restTemplate = new RestTemplate();
    // 直接转换为实体对象
    Indirizzo indirizzo = restTemplate.getForObject(uri, Indirizzo.class);
    
    model.addAttribute("attIndirizzo", indirizzo);

    return "index";
}

步骤3：Thymeleaf页面展示 #

直接通过实体类的属性获取值：

<div>
  街道：<span th:text="${attIndirizzo.street}"></span><br>
  城市：<span th:text="${attIndirizzo.city}"></span><br>
  邮编：<span th:text="${attIndirizzo.zipCode}"></span>
</div>

方案2：解析JSON为Map（无需实体类） #

如果不想创建实体类，可以用Jackson将JSON字符串解析为Map，再传递到页面展示。

修改Controller代码 #

import com.fasterxml.jackson.databind.ObjectMapper;

@GetMapping("/api")
public String getIndirizzo(Model model) throws IOException {
    String uri = "http://localhost:8081/api/byid/1";
    RestTemplate restTemplate = new RestTemplate();
    String resultString = restTemplate.getForObject(uri, String.class);
    
    // 将JSON字符串解析为Map
    ObjectMapper objectMapper = new ObjectMapper();
    Map<String, Object> indirizzoMap = objectMapper.readValue(resultString, Map.class);
    
    model.addAttribute("attIndirizzo", indirizzoMap);

    return "index";
}

Thymeleaf页面展示 #

通过Map的键获取对应值：

<div>
  街道：<span th:text="${attIndirizzo.street}"></span><br>
  城市：<span th:text="${attIndirizzo.city}"></span><br>
  邮编：<span th:text="${attIndirizzo.zipCode}"></span>
</div>

方案3：在Thymeleaf页面直接解析JSON #

利用Thymeleaf的#json工具类直接在页面解析JSON字符串，需要确保项目中引入了Thymeleaf的JSON依赖（Spring Boot项目通常已默认包含）。

Thymeleaf页面代码 #

<div th:with="indirizzo=${#json.parse(attIndirizzo)}">
  街道：<span th:text="${indirizzo.street}"></span><br>
  城市：<span th:text="${indirizzo.city}"></span><br>
  邮编：<span th:text="${indirizzo.zipCode}"></span>
</div>

内容的提问来源于stack exchange，提问作者user27593256