本文讲解如何在 Spring Boot 后端返回纯字符串列表（如文件名）时，前端 JavaScript 正确遍历该 JSON 数组并动态生成 元素，避免因误用 d.value 等不存在属性导致渲染失败。

本文讲解如何在 spring boot 后端返回纯字符串列表（如文件名）时，前端 javascript 正确遍历该 json 数组并动态生成 `` 元素，避免因误用 `d.value` 等不存在属性导致渲染失败。

在你的代码中，Spring Boot 控制器 fileSelection() 方法返回的是一个 List<string></string>，例如 ["data.txt", "data2.txt"]。当该响应被 response.json() 解析后，前端得到的是一个纯字符串数组（而非对象数组），因此每个元素 d 就是字符串本身，没有 .value、.name 或其他嵌套属性——直接访问 d.value 会返回 undefined，导致 <option></option> 内容为空。

✅ 正确做法是：将数组每一项（即文件名字符串）直接作为 <option></option> 的文本和 value 属性值：

Json Schema Toolkit

使用 JSON Schema 验证 JSON 数据，从示例 JSON 生成 schema，并将其转换为 TypeScript 接口、Python 数据类或 Markdown 文档。

下载

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, """)
    .replace(/'/g, "&#039;");
}

⚠️ 注意事项：

• 不要假设结构：后端返回 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 的第一步。