如何使用JSON创建动态表格？求jQuery/React实现方法

Hey there! Since you already have a solid foundation in HTML, JavaScript, and Angular, building dynamic tables from JSON with jQuery or React should feel familiar with just a few framework-specific tweaks. Let’s walk through both implementations plus the core general approach that applies to any method.

Core General Approach (Works for Any Framework) #

No matter which tool you use, the underlying logic stays the same:

• Parse your JSON: If your data comes as a string (e.g., from an API response), use JSON.parse() to convert it into a JavaScript object/array.
• Extract headers: Grab the keys from the first object in your JSON array (or use custom headers if you don’t want to match the JSON keys exactly).
• Build table structure: Create the <table>, <thead>, and <tbody> elements.
• Render headers: Loop through your header list to create <th> elements.
• Render rows: Iterate over each object in your JSON array, create a <tr> for each, then add <td> elements for every property in the object.
• Inject into DOM: Attach the completed table to a container in your HTML.

jQuery Implementation #

jQuery makes DOM manipulation straightforward with its chainable methods. Here’s a complete example:

HTML #

<div id="table-container"></div>

JavaScript #

// Sample JSON data (replace with your actual data)
const jsonData = [
  { id: 1, name: "Alice", email: "alice@example.com", age: 28 },
  { id: 2, name: "Bob", email: "bob@example.com", age: 32 },
  { id: 3, name: "Charlie", email: "charlie@example.com", age: 25 }
];

$(document).ready(function() {
  // Target the container where we'll insert the table
  const $container = $("#table-container");

  // Create the main table element (add Bootstrap classes for styling if needed)
  const $table = $("<table>").addClass("table table-striped table-bordered");

  // Build the table header
  const $thead = $("<thead>").addClass("table-dark");
  const $headerRow = $("<tr>");
  const headers = Object.keys(jsonData[0]);

  headers.forEach(header => {
    // Capitalize the first letter of each header for readability
    const formattedHeader = header.charAt(0).toUpperCase() + header.slice(1);
    $headerRow.append($("<th>").text(formattedHeader));
  });

  $thead.append($headerRow);
  $table.append($thead);

  // Build the table body
  const $tbody = $("<tbody>");
  jsonData.forEach(item => {
    const $row = $("<tr>");
    headers.forEach(header => {
      $row.append($("<td>").text(item[header]));
    });
    $tbody.append($row);
  });

  $table.append($tbody);

  // Add the table to the page
  $container.append($table);
});

Note for Async Data #

If your JSON comes from an API, use jQuery’s $.getJSON to fetch it and run the table-building logic in the success callback:

$.getJSON("your-api-url", function(data) {
  // Use the fetched `data` instead of the sample jsonData above
});

React Implementation #

React uses a declarative approach—you’ll define how the table should look based on your data, and React handles updating the DOM. We’ll use a functional component here (the standard for modern React):

Component Code #

import React from 'react';

// Reusable table component that accepts data as a prop
const DynamicTable = ({ data }) => {
  // Handle empty data case to avoid errors
  if (!data || data.length === 0) {
    return <div className="text-center mt-4">No data to display</div>;
  }

  // Extract headers from the first data item
  const headers = Object.keys(data[0]);

  return (
    <div className="container mt-4">
      <table className="table table-striped table-bordered">
        <thead className="table-dark">
          <tr>
            {headers.map(header => (
              <th key={header}>
                {header.charAt(0).toUpperCase() + header.slice(1)}
              </th>
            ))}
          </tr>
        </thead>
        <tbody>
          {data.map((item) => (
            // Use a unique identifier (like item.id) as the key instead of index for better performance
            <tr key={item.id}>
              {headers.map(header => (
                <td key={`${item.id}-${header}`}>{item[header]}</td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
};

// Usage in your main App component
function App() {
  // Sample JSON data (replace with your data, or fetch it asynchronously)
  const jsonData = [
    { id: 1, name: "Alice", email: "alice@example.com", age: 28 },
    { id: 2, name: "Bob", email: "bob@example.com", age: 32 },
    { id: 3, name: "Charlie", email: "charlie@example.com", age: 25 }
  ];

  return <DynamicTable data={jsonData} />;
}

export default App;

Fetching Async Data in React #

If you need to get JSON from an API, use useState and useEffect hooks to handle the data fetch:

import React, { useState, useEffect } from 'react';

const DynamicTable = () => {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch("your-api-url")
      .then(response => response.json())
      .then(fetchedData => {
        setData(fetchedData);
        setLoading(false);
      })
      .catch(error => {
        console.error("Error fetching data:", error);
        setLoading(false);
      });
  }, []);

  if (loading) return <div className="text-center mt-4">Loading...</div>;
  if (data.length === 0) return <div className="text-center mt-4">No data to display</div>;

  const headers = Object.keys(data[0]);

  return (
    {/* Same table JSX as above */}
  );
};

Quick Tips for Both Methods #

• Custom Headers: If you don’t want to use the JSON keys as headers, define a separate array like const customHeaders = ["ID", "Full Name", "Email", "Age"] and map it to your JSON keys.
• Styling: Use CSS frameworks like Bootstrap to quickly style your tables (the examples above use Bootstrap classes).
• Edge Cases: Handle nested JSON properties (e.g., item.user.name) by adjusting the td content to access nested values.

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