JSP如何将嵌套数组结构的JsonArray渲染为逐行展示的HTML表格

问题原因 #

你当前生成的JSON结构不合理，JSONArray中仅包含1个JSONObject对象，该对象下的Name、Email都是存储了所有值的数组。你之前的JSP代码仅遍历了JSONArray的长度（仅为1），所以只会生成1行表格，直接输出整个数组就出现了所有数据挤在同一行的问题。

方案1：修改后端JSON生成逻辑（推荐） #

原来的代码把所有数据都追加到同一个JSONObject中，导致同key的值被合并为数组，调整逻辑为循环内为每个用户创建独立的JSONObject，再插入JSONArray：

for(x y : model) {
    // 循环内每次创建新的JSONObject存储单个用户信息
    JSONObject obj_JSONObject1 = new JSONObject();
    // 用put而非append，避免同key值合并为数组
    obj_JSONObject1.put("Name", x.getName());
    obj_JSONObject1.put("Email", x.getValue());
    // 逐个将用户对象插入JSONArray
    jsonArray.put(obj_JSONObject1);
}

调整后生成的JSON结构如下，完全符合一对一行的渲染逻辑：

[
  {
    "Email": "email1@email.com",
    "Name": "name1"
  },
  {
    "Email": "abc@liferay.com",
    "Name": "name2"
  }
]

此时你原来的JSP遍历代码不需要修改，即可正常渲染每行一条用户数据。

方案2：不修改后端，仅调整JSP遍历逻辑 #

如果不方便修改后端代码，可以直接在前端按索引遍历Name和Email两个数组：

<!-- 先取出JSONArray中唯一的用户数据对象 -->
<c:set var="userData" value="${userList.getJSONObject(0)}" />
<!-- 按Name数组的长度遍历索引，Name和Email数组长度一一对应 -->
<c:forEach begin="0" end="${userData.getJSONArray('Name').length() - 1}" var="i">
<tr>
     <td>${userData.getJSONArray('Name').get(i)}</td>
     <td>${userData.getJSONArray('Email').get(i)}</td>
</tr>
</c:forEach>

注：如果你的项目用的是非org.json的JSON工具包，可将getJSONArray替换为对应工具包的数组获取方法即可。

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