如何将动态JSON查询结果转为网页表格？（React/Next.js）

解决方案 #

要实现动态JSON结果转表格展示，核心是根据返回的数组数据动态生成表头和表格行，具体实现步骤如下：

1. 调整状态类型匹配返回格式 #

将jsonResult的初始状态改为数组（因为接口返回的是数组格式的JSON），避免后续渲染时出现类型错误。

2. 编写动态表格渲染逻辑 #

在组件中添加表格渲染逻辑：

• 先判断jsonResult是否有数据，无数据时显示提示文本
• 从数组第一个元素中提取所有属性名作为表头列
• 遍历数组中的每个对象，为每个对象生成一行表格，每个属性值对应一个单元格

修改后的完整代码 #

import Head from "next/head";
import { useState } from "react";
import styles from "./index.module.css";
import React from "react";

export default function Home() {
  const [queryInput, setQueryInput] = useState("");
  const [result, setResult] = useState({});
  // 初始状态改为数组，匹配接口返回的JSON格式
  const [jsonResult, setJsonResult] = useState([]);

  async function onSubmit(event) {
    event.preventDefault();
    try {
      const response = await fetch("/api/generateTSQL", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({ query: queryInput }),
      });

      const data = await response.json();
      if (response.status !== 200) {
        throw data.error || new Error(`Request failed with status ${response.status}`);
      }

      setResult(data);
      // 校验并赋值，确保jsonResult始终是数组类型
      setJsonResult(Array.isArray(data.jsonResult) ? data.jsonResult : []);
      setQueryInput("");
    } catch(error) {
      console.error(error);
      alert(error.message);
    }
  }

  return (
    <div>
      <Head>
        <title>SQL Query Result Table</title>
      </Head>
      <main className={styles.main}>
        <form onSubmit={onSubmit}>
          <input
            type="text"
            name="query"
            placeholder="Enter SQL query"
            value={queryInput}
            onChange={(e) => setQueryInput(e.target.value)}
          />
          <input type="submit" value="Execute Query" />
        </form>
        <div className={styles.result}>{result.result}</div>
        
        {/* 动态渲染表格 */}
        {jsonResult.length > 0 ? (
          <table className={styles.table}>
            <thead>
              <tr>
                {/* 从第一个对象提取属性名作为表头 */}
                {Object.keys(jsonResult[0]).map((column) => (
                  <th key={column}>{column}</th>
                ))}
              </tr>
            </thead>
            <tbody>
              {/* 遍历每个数据对象生成表格行 */}
              {jsonResult.map((row, index) => (
                <tr key={index}>
                  {Object.values(row).map((value, idx) => (
                    <td key={idx}>{value}</td>
                  ))}
                </tr>
              ))}
            </tbody>
          </table>
        ) : (
          <p className={styles.noResult}>No results to display</p>
        )}
      </main>
    </div>
  );
}

关键细节说明 #

• 类型校验：在赋值jsonResult时添加数组校验，避免接口返回非数组数据导致渲染崩溃
• 动态表头：通过Object.keys(jsonResult[0])获取第一个数据对象的所有属性名，确保表头与返回字段完全匹配
• 动态行数据：用Object.values(row)提取每个对象的属性值，自动适配不同的字段数量
• 空状态处理：无数据时显示友好提示，提升用户体验

可选样式优化 #

可以在index.module.css中添加表格样式，让展示更美观：

.table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}

.table th, .table td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

.table th {
  background-color: #f2f2f2;
  font-weight: bold;
}

.noResult {
  margin-top: 20px;
  color: #666;
}

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