json数据怎么显示在td里

JSON数据怎么显示在td里：前端实现全解析

在Web开发中，经常需要将JSON数据展示在HTML表格的单元格（td）中，JSON（JavaScript Object Notation）作为一种轻量级的数据交换格式，其结构化的数据特性使得在前端展示时需要一些特定的处理方法，本文将详细介绍几种将JSON数据显示在td中的常见方法，从基础到进阶,帮助你灵活应对各种场景。

直接渲染JSON字符串（基础方法）

最简单的方式是将JSON对象转换为字符串后直接插入td中：

<table>
  <tr>
    <td id="jsonDisplay"></td>
  </tr>
</table>
<script>
  const jsonData = { name: "张三", age: 25, city: "北京" };
  const jsonString = JSON.stringify(jsonData);
  document.getElementById("jsonDisplay").innerText = jsonString;
</script>

优点：实现简单，无需额外处理。
缺点：显示的是格式化的JSON字符串，可读性较差,无法交互。

格式化JSON并高亮显示（提升可读性）

使用JSON.stringify的第三个参数实现缩进,并配合CSS样式提升可读性：

<table>
  <tr>
    <td id="prettyJson"></td>
  </tr>
</table>
<style>
  .json-key { color: #007bff; font-weight: bold; }
  .json-string { color: #28a745; }
  .json-number { color: #dc3545; }
</style>
<script>
  const jsonData = { name: "张三", age: 25, city: "北京" };
  const prettyJson = JSON.stringify(jsonData, null, 2)
    .replace(/(".*?"):\s*/g, '<span class="json-key">$1</span>: ')
    .replace(/: (".*?")/g, ': <span class="json-string">$1</span>')
    .replace(/: (\d+)/g, ': <span class="json-number">$1</span>');
  document.getElementById("prettyJson").innerHTML = prettyJson;
</script>

优点：JSON结构清晰，关键字高亮显示。
缺点：需要手动处理样式,对于嵌套较深的JSON结构可能不够直观。

递归渲染嵌套JSON（处理复杂数据）

对于嵌套的JSON数据,可以使用递归函数将其转换为HTML表格结构：

<table id="nestedTable"></table>
<script>
  function renderJsonToTable(data, parentElement) {
    if (typeof data === 'object' && data !== null) {
      const table = document.createElement('table');
      table.style.borderCollapse = 'collapse';
      table.style.width = '100%';
      for (const key in data) {
        const row = table.insertRow();
        const keyCell = row.insertCell();
        const valueCell = row.insertCell();
        keyCell.style.border = '1px solid #ddd';
        keyCell.style.padding = '8px';
        keyCell.style.fontWeight = 'bold';
        keyCell.innerText = key;
        if (typeof data[key] === 'object' && data[key] !== null) {
          valueCell.appendChild(renderJsonToTable(data[key], document.createElement('div')));
        } else {
          valueCell.style.border = '1px solid #ddd';
          valueCell.style.padding = '8px';
          valueCell.innerText = data[key];
        }
      }
      return table;
    }
    return document.createTextNode(data);
  }
  const complexJson = {
    name: "李四",
    details: {
      age: 30,
      address: {
        city: "上海",
        district: "浦东新区"
      }
    },
    hobbies: ["阅读", "旅行", "摄影"]
  };
  document.getElementById("nestedTable").appendChild(renderJsonToTable(complexJson, document.createElement('div')));
</script>

优点：能够清晰展示嵌套结构，适合复杂数据。
缺点：代码量较大,需要处理多种数据类型。

使用模板引擎（动态渲染）

对于需要动态渲染的场景，可以使用模板引擎（如Handlebars、Mustache等）：

<table>
  <tbody id="templateContainer"></tbody>
</table>
<script id="jsonTemplate" type="text/x-handlebars-template">
  {{#each this}}
    <tr>
      <td>{{@key}}</td>
      <td>
        {{#if (isObject this)}}
          {{JSONstringify this}}
        {{else}}
          {{this}}
        {{/if}}
      </td>
    </tr>
  {{/each}}
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.7.7/handlebars.min.js"></script>
<script>
  const jsonData = { name: "王五", age: 28, city: "广州" };
  Handlebars.registerHelper('isObject', function(value) {
    return typeof value === 'object' && value !== null;
  });
  Handlebars.registerHelper('JSONstringify', function(obj) {
    return JSON.stringify(obj, null, 2);
  });
  const template = Handlebars.compile(document.getElementById('jsonTemplate').innerHTML);
  document.getElementById('templateContainer').innerHTML = template(jsonData);
</script>

优点：模板与逻辑分离，适合复杂动态场景。
缺点：需要引入额外库,增加项目复杂度。

使用现代框架（Vue/React）

在现代前端框架中,渲染JSON数据变得更加简洁：

Vue示例：

<div id="app">
  <table>
    <tr v-for="(value, key) in jsonData" :key="key">
      <td>{{ key }}</td>
      <td>{{ JSON.stringify(value, null, 2) }}</td>
    </tr>
  </table>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
  const { createApp } = Vue;
  createApp({
    data() {
      return {
        jsonData: { name: "赵六", age: 32, city: "深圳" }
      }
    }
  }).mount('#app');
</script>

React示例：

<div id="root"></div>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
  const { useState } = React;
  function JsonTable({ data }) {
    return (
      <table>
        <tbody>
          {Object.entries(data).map(([key, value]) => (
            <tr key={key}>
              <td>{key}</td>
              <td><pre>{JSON.stringify(value, null, 2)}</pre></td>
            </tr>
          ))}
        </tbody>
      </table>
    );
  }
  const jsonData = { name: "钱七", age: 35, city: "成都" };
  ReactDOM.render(<JsonTable data={jsonData} />, document.getElementById('root'));
</script>

优点：声明式渲染，代码简洁，易于维护。
缺点：需要引入框架,不适合简单场景。