本文讲解如何在 Spring Boot 后端返回纯字符串列表（如文件名）时，前端 JavaScript 正确遍历该 JSON 数组并动态生成 元素，避免因误用 d.value 等不存在属性导致渲染失败。
本文讲解如何在 spring boot 后端返回纯字符串列表（如文件名）时，前端 javascript 正确遍历该 json 数组并动态生成 `
在你的代码中，Spring Boot 控制器 fileSelection() 方法返回的是一个 List<string></string>，例如 ["data.txt", "data2.txt"]。当该响应被 response.json() 解析后，前端得到的是一个纯字符串数组（而非对象数组），因此每个元素 d 就是字符串本身，没有 .value、.name 或其他嵌套属性——直接访问 d.value 会返回 undefined，导致 <option></option> 内容为空。
✅ 正确做法是：将数组每一项（即文件名字符串）直接作为 <option></option> 的文本和 value 属性值：
function getLines() {
fetch('/application', { method: 'GET' })
.then(response => {
if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
return response.json();
})
.then(data => {
// data 是字符串数组：["data.txt", "data2.txt"]
const optionsHtml = data
.map(filename => `<option value="${escapeHtml(filename)}">${escapeHtml(filename)}</option>`)
.join('');
document.getElementById("test").innerHTML = optionsHtml;
})
.catch(err => console.error('Failed to load files:', err));
}
// 防 XSS：简单转义 HTML 特殊字符（生产环境建议使用 DOMPurify 等库）
function escapeHtml(unsafe) {
return unsafe
.replace(/&/g, "&")
.replace(/, "/g, ">")
.replace(/"/g, """)
.replace(/'/g, "'");
}
⚠️ 注意事项：
Json Schema Toolkit
下载
使用 JSON Schema 验证 JSON 数据，从示例 JSON 生成 schema，并将其转换为 TypeScript 接口、Python 数据类或 Markdown 文档。
-
不要假设结构：后端返回
List<string></string>→ 前端必须按string[]处理，而非{ value: string }[]； -
避免 XSS 风险：直接拼接用户可控的文件名到 HTML 中存在安全风险，务必对
filename进行 HTML 转义（如上示例）； -
增强健壮性：添加
response.ok检查和try/catch，防止网络错误或空响应导致脚本中断； -
服务端可选优化：若未来需扩展元信息（如文件大小、修改时间），可改为返回对象列表（如
List<map object>></map>或自定义 DTO），此时前端才应使用d.filename或d.name等键访问。
总结：JSON 数组的“名称”取决于其元素类型——字符串数组的元素就是名称本身；对象数组才需通过键（如 d.name）提取字段。理解数据形态，是准确读取 JSON 的第一步。
