Thymeleaf中th:text渲染变量时显示多余双引号问题排查

尝试将JSON数据渲染到HTML表格时，发现表格内每个变量内容都带有多余的双引号，需要去除这些引号。

问题原因 #

问题出在JsonHelper类的getSeparatedMembersByKeys方法返回的是JsonArray，其中的元素是JsonElement类型（比如字符串类型的JsonPrimitive）。在Thymeleaf中直接渲染JsonElement时，会调用它的toString()方法，字符串类型的JsonPrimitive会自带双引号输出。

解决方案 #

修改JsonHelper的getSeparatedMembersByKeys方法，将JsonElement转换为对应的原生类型（如String、Int等），返回原生类型的列表，而非JsonArray。

修改后的JsonHelper类 #

@Component
class JsonHelper() {

    private val gson = Gson().newBuilder().serializeNulls().create()

    fun <T> toJsonObject(model: T): JsonObject {
        val jsonString = gson.toJson(model)
        return gson.fromJson(jsonString, JsonObject::class.java)
    }

    fun <T> getMembersKeyValues(model: T): List<String> {
        val jsonObject = toJsonObject(model)
        return jsonObject.keySet().toList()
    }

    fun <T> getSeparatedMembersByKeys(model: T): List<Any?> {
        val jsonObject = toJsonObject(model)
        val keys = jsonObject.keySet().toList()

        return keys.map { key ->
            val element = jsonObject.get(key)
            when {
                element.isJsonPrimitive -> {
                    val primitive = element.asJsonPrimitive
                    when {
                        primitive.isString -> primitive.asString
                        primitive.isNumber -> primitive.asNumber
                        primitive.isBoolean -> primitive.asBoolean
                        else -> primitive.toString()
                    }
                }
                element.isJsonNull -> null
                else -> element.toString() // 非基本类型可根据需求调整处理逻辑
            }
        }
    }
}

控制器方法适配 #

由于返回类型从JsonArray改为List<Any?>，控制器代码无需额外修改，自动适配：

@GetMapping()
fun home(model: Model): String {
    val users = userService.getAllUsers()
    model.addAttribute("tableAttributes", jsonHelper.getMembersKeyValues(User()))
    model.addAttribute("tableData", users.map { jsonHelper.getSeparatedMembersByKeys(it) })
    return "home"
}

HTML代码保持不变 #

<div class="container-sm">
    <table class="table">
        <thead>
        <tr>
            <th scope="col" th:each="attribute: ${tableAttributes}" th:text="${attribute}">#</th>
        </tr>
        </thead>
        <tbody>
        <tr th:each="data: ${tableData}">
            <td th:each="variable: ${data}" th:text="${variable}"></td>
        </tr>
        </tbody>
    </table>
</div>

说明 #

修改后的getSeparatedMembersByKeys方法会将每个JsonElement转换为对应的原生类型：

• 字符串类型转为String，渲染时不再带双引号
• 数字、布尔类型转为对应原生类型，保持正确显示格式
• 空值转为null，Thymeleaf会渲染为空内容

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