如何在JSP中解析GSON JSONObject并生成数据表格

问题描述 #

从Servlet向JSP传递了以下GSON JSONObject：

{
    "TradesJSONArray": [{
        "SOURCE": "Trayport",
        "TRAN_NUM": 11884531,
        "EXCHANGETIME": "2022-07-28 12:30:56.0",
        "ERROR_DETAILS": "NULL"
    }, {
        "SOURCE": "Trayport",
        "TRAN_NUM": 11884532,
        "EXCHANGETIME": "2022-07-28 12:30:55.0",
        "ERROR_DETAILS": "NULL"
    }]
}

需在JSP中解析该JSON，以JSON的键作为列名、值作为列数据生成表格。

方案一：后端Java（GSON）解析生成表格 #

前提 #

确保项目已引入GSON依赖，Servlet中已将JSONObject存入request属性，例如：

request.setAttribute("tradeJson", jsonObject);

JSP代码示例 #

<%@ page import="com.google.gson.JsonObject" %>
<%@ page import="com.google.gson.JsonArray" %>
<%@ page import="com.google.gson.JsonElement" %>

<%
// 从request中获取Servlet传递的JSONObject
JsonObject tradeJson = (JsonObject) request.getAttribute("tradeJson");
JsonArray tradesArray = tradeJson.getAsJsonArray("TradesJSONArray");

if (tradesArray.size() > 0) {
    // 获取第一条数据的键作为表头列名
    JsonObject firstTrade = tradesArray.get(0).getAsJsonObject();
%>
<table border="1" cellpadding="8" cellspacing="0">
    <thead>
        <tr>
            <%
            // 遍历键生成表头
            for (String columnName : firstTrade.keySet()) {
            %>
                <th><%= columnName %></th>
            <%
            }
            %>
        </tr>
    </thead>
    <tbody>
        <%
        // 遍历每条交易数据生成表格行
        for (JsonElement element : tradesArray) {
            JsonObject trade = element.getAsJsonObject();
        %>
        <tr>
            <%
            for (String columnName : firstTrade.keySet()) {
            %>
                <td><%= trade.get(columnName).getAsString() %></td>
            <%
            }
            %>
        </tr>
        <%
        }
        %>
    </tbody>
</table>
<%
} else {
%>
<p>暂无交易数据</p>
<%
}
%>

方案二：前端JavaScript解析生成表格 #

前提 #

Servlet中可将JSONObject转为字符串存入request属性，例如：

request.setAttribute("tradeJsonStr", jsonObject.toString());

JSP代码示例 #

<%@ page import="com.google.gson.JsonObject" %>

<%
// 获取JSON字符串
String tradeJsonStr = (String) request.getAttribute("tradeJsonStr");
%>

<div id="tradeTableContainer"></div>

<script>
// 解析JSON字符串为JS对象
const tradeData = JSON.parse('<%= tradeJsonStr %>');
const tradesArray = tradeData.TradesJSONArray;
const container = document.getElementById('tradeTableContainer');

if (tradesArray.length > 0) {
    // 创建表格元素
    const table = document.createElement('table');
    table.border = "1";
    table.cellPadding = "8";
    table.cellSpacing = "0";

    // 生成表头
    const headerRow = document.createElement('tr');
    const columnNames = Object.keys(tradesArray[0]);
    columnNames.forEach(name => {
        const th = document.createElement('th');
        th.textContent = name;
        headerRow.appendChild(th);
    });
    table.appendChild(headerRow);

    // 生成表体数据行
    const tbody = document.createElement('tbody');
    tradesArray.forEach(trade => {
        const row = document.createElement('tr');
        columnNames.forEach(name => {
            const td = document.createElement('td');
            td.textContent = trade[name];
            row.appendChild(td);
        });
        tbody.appendChild(row);
    });
    table.appendChild(tbody);

    container.appendChild(table);
} else {
    container.innerHTML = '<p>暂无交易数据</p>';
}
</script>

注意事项 #

1. 后端解析方式需确保GSON的jar包已添加到项目依赖中
2. 前端解析时，若数据包含特殊字符，建议使用textContent而非innerHTML避免XSS风险
3. 若交易数据量较大，优先选择后端解析生成HTML，减少前端渲染压力

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