Bootstrap-Table 加载嵌套 JSON 数据的正确配置方法-js教程-PHP中文网

本文详解如何在 Bootstrap-Table 中正确加载并渲染深层嵌套的 JSON 数据（如 poi.items），解决因数据路径不匹配导致“无匹配记录”问题，涵盖字段映射、数据预处理与动态加载关键实践。

本文详解如何在 bootstrap-table 中正确加载并渲染深层嵌套的 json 数据（如 `poi.items`），解决因数据路径不匹配导致“无匹配记录”问题，涵盖字段映射、数据预处理与动态加载关键实践。

Bootstrap-Table 默认期望接收扁平化数组格式的 JSON 数据（即直接为 [{...}, {...}]），而你的接口返回的是结构复杂的嵌套对象：

{
  "access_time": "...",
  "meeting_date": "...",
  "meeting_plan": { "count": 2, "items": [...] },
  "poi": { "count": 3, "items": [...] }
}

其中真正需要展示的表格行数据位于 poi.items 数组内，但

无法自动穿透两层嵌套（poi → items → title）——Bootstrap-Table 的 data-field 仅支持一级属性或点号分隔的浅层路径（如 user.name），不支持数组索引或动态遍历（如 poi.items.0.title），更无法将整个 items 数组展开为多行。

✅ 正确做法是：在客户端预处理响应数据，提取并展平目标数组，再通过 .bootstrapTable('load', data) 主动注入。

chartjs-reporter

此技能用于在用户需要将结构化数据（查询结果、CSV 摘要、JSON 记录或 Python 字典/列表）转换为独立的 HTML 页面时使用。

下载

✅ 推荐解决方案：手动提取 poi.items 并加载

首先移除 data-url 属性（避免自动加载失败干扰），改用 JavaScript 显式控制数据流：

<!-- 移除 data-url，改为纯结构定义 -->

Points of Interest
Title	Section	URL

const $table = $('#meetingPoiModalTable');

// 自定义 URL 渲染器（可选）
function urlFormatter(value) {
  return `<a href="%24%7Bvalue%7D" target="_blank">${value}</a>`;
}

$(function() {
  $('#meetingPlanModal').on('shown.bs.modal', function () {
    // 1. 手动发起 AJAX 请求
    $.get('http://example.org/data')
      .done(function(response) {
        // 2. 提取 poi.items（核心步骤）
        const items = response.poi?.items || [];

        // 3. 加载数据（自动渲染）
        $table.bootstrapTable('load', items);

        // 4. 可选：重置视图确保尺寸适配（尤其在模态框中）
        $table.bootstrapTable('resetView');
      })
      .fail(function(xhr) {
        console.error('Failed to load POI data:', xhr);
        $table.bootstrapTable('load', []); // 清空表格并显示空提示
      });
  });
});

⚠️ 注意事项与最佳实践

不要依赖 data-url + 嵌套字段：data-field="poi.items.title" 是无效的，Bootstrap-Table 不解析该语法。
服务端优化更优：若可控后端，建议直接返回扁平数组（如 {"rows": [...]}），并在 data-response-handler 中提取：
```
data-response-handler="responseHandler"
```
```
function responseHandler(res) {
  return res.poi?.items || [];
}
```
字段名必须严格匹配：确保 data-field="title" 与 items 数组中每个对象的键名完全一致（如 "title": "Build an Arcade"）。
模态框初始化时机：务必在 shown.bs.modal（而非 show.bs.modal）中触发加载，确保 DOM 已渲染完成且表格实例已就绪。
错误处理不可少：网络失败或数据缺失时，应主动调用 load([]) 避免残留旧数据或异常状态。