技术需求：将URL返回的JSON数据动态渲染为表格

Alright, let's work through how to turn that JSON response into a dynamic table. First, let's tweak your existing filter function a bit to fix a couple small issues, then we'll build the table-rendering logic.

Step 1: Clean Up the Existing Filter Function #

First, there's a small redundancy (and a missing URL syntax piece) in your current code. Let's fix that to ensure your query parameters are formatted correctly:

function filter() {
  const parameters = [
    ["name", document.getElementById('myInput1').value],
    ["name1", document.getElementById('myInput2').value]
  ];
  // Convert parameter pairs to query string format
  const query = parameters.map(couple => couple.join("=")).join("&");
  // Add "?" to properly separate the base URL from query params
  const url = "myurl?" + query;
  window.location = url;
}

Quick note: The ? before the query string is critical—without it, your server won't recognize the parameters as part of the URL query.

Step 2: Build the JSON-to-Table Rendering Function #

On the page that loads after the redirect, you'll need to take the returned JSON data and turn it into an HTML table. Below is a reusable function that handles this, plus example usage:

JavaScript for Table Rendering #

function renderJsonTable(jsonData, containerId) {
  const container = document.getElementById(containerId);
  
  // Handle empty or missing data
  if (!container || !jsonData || jsonData.length === 0) {
    container.innerHTML = "<p>No data available to display.</p>";
    return;
  }

  // Create the table element
  const table = document.createElement("table");
  table.style.borderCollapse = "collapse";
  table.style.width = "100%";

  // Create table headers using keys from the first JSON object
  const headerRow = document.createElement("tr");
  Object.keys(jsonData[0]).forEach(key => {
    const th = document.createElement("th");
    th.textContent = key;
    th.style.border = "1px solid #ddd";
    th.style.padding = "8px";
    th.style.backgroundColor = "#f5f5f5";
    headerRow.appendChild(th);
  });
  table.appendChild(headerRow);

  // Create table rows for each JSON entry
  jsonData.forEach(item => {
    const row = document.createElement("tr");
    // Alternate row background for readability
    row.style.backgroundColor = row.rowIndex % 2 === 0 ? "#fff" : "#f9f9f9";
    
    Object.values(item).forEach(value => {
      const td = document.createElement("td");
      td.textContent = value;
      td.style.border = "1px solid #ddd";
      td.style.padding = "8px";
      row.appendChild(td);
    });
    table.appendChild(row);
  });

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

// Example: Use this when the page loads
window.onload = async function() {
  try {
    // Fetch the JSON data using the current URL's query parameters
    const queryString = window.location.search;
    const response = await fetch(`your-api-endpoint${queryString}`);
    const jsonData = await response.json();
    
    // Render the table into a container with ID "tableContainer"
    renderJsonTable(jsonData, "tableContainer");
  } catch (error) {
    document.getElementById("tableContainer").innerHTML = 
      `<p>Oops, there was an error loading data: ${error.message}</p>`;
  }
};

HTML Container for the Table #

Add this to your page where you want the table to appear:

<div id="tableContainer"></div>

Key Notes #

• JSON Structure: This function assumes your JSON is an array of objects (the standard format for tabular data). If your JSON has a different structure (e.g., a single object), you'll need to adjust the logic to handle that.
• Styling: The inline styles are basic for demonstration—you can replace them with CSS classes for cleaner, more maintainable styling.
• Error Handling: The example includes basic error handling for failed API calls, which is always a good practice for user experience.

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