无需Angular，从REST API JSON数据创建表格的优雅实现问询

Great question! You absolutely don’t have to resort to manually building every table element with document.createElement—there are several clean, maintainable ways to keep your HTML structure separate from your data logic, mimicking Angular’s one-way binding feel without the framework. Here are the most practical approaches:

1. Template Literals (Simplest for Basic Tables) #

Template literals (backtick strings) let you write your full table structure directly in JavaScript while inserting dynamic data seamlessly. Your HTML stays clean, and the logic is contained in your script.

Example: #

HTML (structure only):

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

JavaScript (fetch data + render):

// Fetch your JSON data from the API
fetch('your-rest-api-endpoint')
  .then(response => response.json())
  .then(data => {
    // Build the full table HTML with dynamic data
    const tableHtml = `
      <table class="data-table" border="1">
        <thead>
          <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Email</th>
          </tr>
        </thead>
        <tbody>
          ${data.map(item => `
            <tr>
              <td>${item.id}</td>
              <td>${item.name}</td>
              <td>${item.email}</td>
            </tr>
          `).join('')}
        </tbody>
      </table>
    `;
    // Inject the table into the container
    document.getElementById('table-container').innerHTML = tableHtml;
  })
  .catch(err => console.error('Failed to fetch data:', err));

Pros: Super concise, easy to write, and keeps your table structure readable.
Cons: Watch out for XSS risks if your data includes untrusted HTML (escape user input if needed).

2. Native HTML <template> Tag (Best for Separation & Reusability) #

The <template> tag lets you define reusable HTML fragments in your markup (just like Angular templates) that you can clone and populate with data in JavaScript. This is the closest to Angular’s template-driven approach with full separation of concerns.

Example: #

HTML (template + base table structure):

<div id="table-wrapper">
  <table class="data-table" border="1">
    <thead>
      <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody id="table-body"></tbody>
  </table>
</div>

<!-- Reusable row template (hidden by default) -->
<template id="data-row-template">
  <tr>
    <td class="id-cell"></td>
    <td class="name-cell"></td>
    <td class="email-cell"></td>
  </tr>
</template>

JavaScript (fetch data + populate templates):

fetch('your-rest-api-endpoint')
  .then(response => response.json())
  .then(data => {
    const tbody = document.getElementById('table-body');
    const rowTemplate = document.getElementById('data-row-template').content;

    data.forEach(item => {
      // Clone the template (true = deep clone)
      const newRow = document.importNode(rowTemplate, true);
      
      // Populate the cloned row with data
      newRow.querySelector('.id-cell').textContent = item.id;
      newRow.querySelector('.name-cell').textContent = item.name;
      newRow.querySelector('.email-cell').textContent = item.email;
      
      // Add the row to the table
      tbody.appendChild(newRow);
    });
  })
  .catch(err => console.error('Failed to fetch data:', err));

Pros: Complete separation of HTML structure and logic, no XSS risks (uses textContent instead of innerHTML), and templates are reusable.
Cons: Slightly more code than template literals, but worth it for complex tables or reusability.

3. Lightweight Template Libraries (Optional) #

If you want even more Angular-like templating without the full framework, consider tiny libraries like Handlebars or Mustache. They let you write templates in HTML with placeholders, then compile and render them with your JSON data.

Quick Example with Handlebars: #

HTML:

<script id="table-template" type="text/x-handlebars-template">
  <table border="1">
    <thead>
      <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      {{#each data}}
        <tr>
          <td>{{id}}</td>
          <td>{{name}}</td>
          <td>{{email}}</td>
        </tr>
      {{/each}}
    </tbody>
  </table>
</script>

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

JavaScript:

// Load Handlebars (via CDN or local file)
fetch('your-rest-api-endpoint')
  .then(response => response.json())
  .then(data => {
    const template = Handlebars.compile(document.getElementById('table-template').innerHTML);
    const tableHtml = template({ data: data });
    document.getElementById('table-container').innerHTML = tableHtml;
  });

Pros: Familiar template syntax if you’re used to Angular, built-in XSS protection, and great for larger projects.
Cons: Adds a small dependency (though these libraries are very lightweight).

Key Notes #

• XSS Protection: If your data comes from untrusted sources, avoid using innerHTML directly. Use textContent (like in the <template> method) or escape HTML characters in your data before rendering.
• Maintainability: The <template> approach is best for keeping your code organized as your table grows, while template literals are perfect for quick, simple tables.

All these approaches let you avoid manual DOM element creation and keep your code clean—just like Angular, but with vanilla JS or minimal tooling.

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