求助：将JSON数据解析为WordPress/HTML表格（基础指导）

Hey there! I’ve got you covered on parsing that multi-entry JSON into an HTML/WordPress table. The key difference from single-entry parsing is looping through the array of apartment objects—let’s break this down with two practical approaches (frontend JS and backend PHP, since you mentioned WordPress):

Frontend JavaScript Approach (For Dynamic/Static Pages) #

This works great if you want to load and render the table directly in the browser, like in a WordPress custom HTML block or theme script.

Step-by-Step Code Example #

// Your JSON data (can also fetch this from an API using `fetch()`)
const apartmentData = {"appartments":[{"aptnum":"199","design":"open","sqft":"1200","extras":"covered parking","pool":"yes","moveinDate":"2019-01-01 13:12:01","link":"https:\/\/www.demoapts.com\/demo\/199"},{"aptnum":"223","design":"Built Already","sqft":"1800","extras":"covered parking","pool":"yes","moveinDate":"2018-05-09 00:12:01","link":"https:\/\/www.demoapts.com\/demo\/223"}]};

// Target the container where you want the table to appear (add this div to your WordPress page)
const container = document.getElementById('apartment-table-container');

// Build the table structure
const table = document.createElement('table');
table.classList.add('wp-block-table'); // Use WordPress's default table styling

// Create table headers
const headerRow = document.createElement('tr');
const headers = [
  'Apartment Number', 
  'Design', 
  'Square Footage', 
  'Extras', 
  'Pool Access', 
  'Move-In Date', 
  'Details Link'
];

headers.forEach(headerText => {
  const th = document.createElement('th');
  th.textContent = headerText;
  headerRow.appendChild(th);
});
table.appendChild(headerRow);

// Loop through each apartment to create table rows
const tbody = document.createElement('tbody');
apartmentData.appartments.forEach(apt => {
  const row = document.createElement('tr');

  // Add cells for each property
  row.innerHTML = `
    <td>${apt.aptnum}</td>
    <td>${apt.design}</td>
    <td>${apt.sqft}</td>
    <td>${apt.extras}</td>
    <td>${apt.pool}</td>
    <td>${apt.moveinDate}</td>
    <td><a href="${apt.link}" target="_blank">View Details</a></td>
  `;

  tbody.appendChild(row);
});
table.appendChild(tbody);

// Insert the table into your page
container.appendChild(table);

How to Use This in WordPress: #

1. Add a custom HTML block to your page/post with a div: <div id="apartment-table-container"></div>
2. Paste the JavaScript into a "Custom HTML" block below it (wrap it in <script> tags)

Backend PHP Approach (For WordPress Shortcodes/Templates) #

If you want server-side rendering (better for performance or if your JSON is stored/retrieved backend), create a custom shortcode you can drop into any page/post.

Step-by-Step Code Example #

Add this to your child theme’s functions.php file (safe from theme updates):

function render_apartment_table() {
  // Your JSON data (can also fetch via API using `wp_remote_get()`)
  $json = '{"appartments":[{"aptnum":"199","design":"open","sqft":"1200","extras":"covered parking","pool":"yes","moveinDate":"2019-01-01 13:12:01","link":"https:\/\/www.demoapts.com\/demo\/199"},{"aptnum":"223","design":"Built Already","sqft":"1800","extras":"covered parking","pool":"yes","moveinDate":"2018-05-09 00:12:01","link":"https:\/\/www.demoapts.com\/demo\/223"}]}';
  
  // Parse JSON into a PHP array
  $aptData = json_decode($json, true);
  
  // Handle parsing errors
  if (!$aptData || !isset($aptData['appartments'])) {
    return '<p>Sorry, could not load apartment data.</p>';
  }

  // Build the table HTML
  $table = '<table class="wp-block-table">';
  
  // Add headers
  $table .= '
    <thead>
      <tr>
        <th>Apartment Number</th>
        <th>Design</th>
        <th>Square Footage</th>
        <th>Extras</th>
        <th>Pool Access</th>
        <th>Move-In Date</th>
        <th>Details Link</th>
      </tr>
    </thead>
  ';
  
  // Loop through apartments to add rows
  $table .= '<tbody>';
  foreach ($aptData['appartments'] as $apt) {
    // Use WordPress escaping functions to avoid security risks
    $table .= sprintf('
      <tr>
        <td>%s</td>
        <td>%s</td>
        <td>%s</td>
        <td>%s</td>
        <td>%s</td>
        <td>%s</td>
        <td><a href="%s" target="_blank">View Details</a></td>
      </tr>',
      esc_html($apt['aptnum']),
      esc_html($apt['design']),
      esc_html($apt['sqft']),
      esc_html($apt['extras']),
      esc_html($apt['pool']),
      esc_html($apt['moveinDate']),
      esc_url($apt['link'])
    );
  }
  $table .= '</tbody></table>';
  
  return $table;
}
// Register the shortcode
add_shortcode('apartment_table', 'render_apartment_table');

How to Use This in WordPress: #

Just drop the shortcode [apartment_table] into any page/post, and the table will render automatically.

Key Tips to Remember: #

• Looping is everything: The core difference from single-entry parsing is iterating over the appartments array (using forEach() in JS or foreach() in PHP) to process each apartment object.
• Match field names: Ensure your table headers map correctly to the JSON keys (e.g., aptnum → "Apartment Number").
• WordPress styling: Adding the wp-block-table class ensures your table inherits WordPress’s default table styling (you can add custom CSS later if needed).
• Security first: Always use escaping functions like esc_html() and esc_url() in PHP to prevent XSS attacks.

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