Spring Boot 中 JSON 数组直接映射为字符串列表的前端解析技巧-java教程-PHP中文网

Spring Boot 中 JSON 数组直接映射为字符串列表的前端解析技巧

本文讲解如何在 Spring Boot 后端返回纯字符串列表（如文件名数组）时，前端 JavaScript 正确解析并渲染为下拉选项，避免因误用 d.value 等不存在属性导致渲染失败。

本文讲解如何在 spring boot 后端返回纯字符串列表（如文件名数组）时，前端 javascript 正确解析并渲染为 `

在你提供的代码中，Spring Boot 控制器 fileSelection() 方法明确返回的是 List<string></string>（例如 ["data.txt", "data2.txt"]），这意味着响应体是一个纯字符串数组，而非对象数组（如 [{"value": "data.txt"}, ...]）。因此，前端接收到的 data 是一个字符串数组，每个元素 d 就是文件名本身（如 "data.txt"），没有 .value、.name 或其他嵌套属性。

你原 JS 代码中的问题行：

data.forEach(d => html += `<option>${d.value}</option>`) // ❌ 错误：d 是字符串，无 .value 属性

会导致 d.value 求值为 undefined，下拉框显示为空白选项。

✅ 正确做法是直接使用字符串 d 作为选项文本和值：

前端美化

使用此技能可创建独具特色、具备生产级质量的前端界面，设计品质高。当用户要求构建网页组件、页面、产物、海报或应用程序时（例如：网站、落地页、仪表盘、React 组件、HTML/CSS 布局，或对任意 Web UI 进行样式优化与视觉美化），请启用该能力。输出需为富有创意、精雕细琢的代码与 UI 设计，避免千篇一律的 AI 风格。

下载

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"] → 直接映射为 <option> 元素
      const optionsHtml = data
        .map(filename => `</option><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, "'");
}

? 关键要点总结：

后端返回类型决定前端访问方式：List<string></string> → 前端 data[i] 就是字符串；List<filedto></filedto>（含 name 字段）→ 才用 d.name。
避免硬编码属性名：调试时先 console.log(data) 查看真实结构，再编写访问逻辑。
安全渲染：动态插入用户文件名时，务必对 filename 做 HTML 转义，防止 XSS 攻击（示例中已提供轻量级转义函数）。
增强健壮性：添加 response.ok 检查与错误捕获，避免网络异常导致静默失败。