如何在JSON中存储HTML标记，实现分类数据的表格展示？

1. 在JSON中存储HTML代码 #

你可以直接将text字段的值设置为HTML字符串，JS会将其作为普通字符串存储，后续渲染时可解析为HTML。注意如果字符串包含双引号，要么用单引号包裹，要么转义双引号：

var jsonVar = [{
  text: '<div><strong>主分类:</strong> {{ category.name }}</div>',
  icon: "fa fa-home fa-fw",
  nodes: [{
    text: '<span class="text-secondary">子分类:</span> {{ category.subcategory.name }}',
    icon: "fa fa-tree fa-fw",
    nodes: [{
      icon: "fa fa-user fa-fw",
      text: '<small>创建人: {{ subcategory.createdBy}}</small>'
    }]
  }]
}];

2. 解析嵌套JSON生成3列表格 #

由于你的JSON是多层嵌套结构，需要递归遍历所有节点，收集每一行的三级分类数据（主分类、子分类、子子分类），缺失的层级留空。以下是完整实现：

HTML结构 #

<!-- 引入必要依赖 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.4/css/dataTables.bootstrap5.min.css">

<table id="categoryTable" class="table table-striped">
  <thead>
    <tr>
      <th>主分类</th>
      <th>子分类</th>
      <th>详情</th>
    </tr>
  </thead>
  <tbody></tbody>
</table>

<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.4/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.4/js/dataTables.bootstrap5.min.js"></script>

JS解析与表格渲染 #

// 递归遍历JSON，收集三级分类数据
function parseCategories(data, parent1 = '', parent2 = '') {
  let rows = [];
  for (let item of data) {
    if (item.nodes && item.nodes.length > 0) {
      rows = rows.concat(parseCategories(item.nodes, item.text, parent1));
    } else {
      rows.push({
        level1: parent2,
        level2: parent1,
        level3: item.text
      });
    }
  }
  return rows;
}

// 动态生成表格行
function renderTable(rows) {
  const tbody = document.querySelector('#categoryTable tbody');
  tbody.innerHTML = '';
  rows.forEach(row => {
    const tr = document.createElement('tr');
    tr.innerHTML = `
      <td>${row.level1 || ''}</td>
      <td>${row.level2 || ''}</td>
      <td>${row.level3 || ''}</td>
    `;
    tbody.appendChild(tr);
  });
}

// 执行解析与渲染
const categoryRows = parseCategories(jsonVar);
renderTable(categoryRows);

// 初始化Bootstrap DataTable
$(document).ready(function() {
  $('#categoryTable').DataTable({
    paging: true,
    searching: true,
    ordering: true
  });
});

3. 单列表格替代方案 #

如果不需要3列结构，只想生成单列表格，简化递归逻辑即可：

// 递归收集所有text内容
function getAllTexts(data) {
  let texts = [];
  for (let item of data) {
    texts.push(item.text);
    if (item.nodes && item.nodes.length > 0) {
      texts = texts.concat(getAllTexts(item.nodes));
    }
  }
  return texts;
}

// 生成单列表格
function renderSingleColumnTable(texts) {
  const tbody = document.querySelector('#categoryTable tbody');
  tbody.innerHTML = '';
  texts.forEach(text => {
    const tr = document.createElement('tr');
    tr.innerHTML = `<td>${text}</td>`;
    tbody.appendChild(tr);
  });
}

// 执行
const allTexts = getAllTexts(jsonVar);
renderSingleColumnTable(allTexts);

// DataTable初始化同上

注意事项 #

• 若使用模板引擎（如Handlebars、EJS），需确保{{ category.name }}这类模板变量在渲染前已被替换为实际值，否则浏览器会直接显示占位符。
• 若JSON中的HTML包含用户输入内容，务必做XSS防护，避免注入风险。

内容的提问来源于stack exchange，提问作者EE2017