JSP JSTL 遍歷 JSON 字串動態生成單選按鈕

需求場景

JSP 頁面接收 ${question.issue} 為 JSON 字串 {"A":"三國","B":"隋唐","C":"魏晉南北朝","D":"漢朝"}，需轉換為四個單選按鈕。

前端解析方案

JSTL 無法直接解析 JSON 字串，建議在 Controller/Service 層將 JSON 反序列化為 Map<String, String> 或 List 後傳給視圖。若必須在前端處理，可用 JavaScript：

<script>
var issueJson = '${question.issue}'; // 假設已正確跳脫
var issueMap = JSON.parse(issueJson);
$.each(issueMap, function(key, value) {
    $('#optionsContainer').append(
        '<input type="radio" name="answer" value="' + key + '">' + value + '<br>'
    );
});
</script>

後端預處理（推薦）

// Java 端
ObjectMapper mapper = new ObjectMapper();
Map<String, String> issueMap = mapper.readValue(question.getIssue(), new TypeReference<Map<String, String>>(){});
request.setAttribute("issueMap", issueMap);

<!-- JSP -->
<c:forEach items="${issueMap}" var="entry">
    <input type="radio" name="answer" value="${entry.key}"> ${entry.value} <br>
</c:forEach>

關鍵點

• JSON 字串在 JSP 中直接輸出需注意單引號/雙引號跳脫，防止 XSS。
• 後端反序列化集中處理異常，前端只負責渲染，職責分離更清晰。
• 若資料量大，考慮分頁或虛擬滾動渲染。

「後端處理資料結構，前端專注呈現」是可維護 Web 應用的基本原則。