Solved: JSON to HTML Table - 5 Common Fixes for 2025

Fix #1: Handling Inconsistent or Missing Keys

The Problem: Your JSON data comes from a source where objects don't share the same set of properties. One object might have an `email` key while another has a `contact` key, and a third has neither. Using our simple script from above would result in a broken table, as it only uses the keys from the first object for the headers.

const messyUsers = [
  { "id": 1, "name": "Alice" },
  { "id": 2, "name": "Bob", "email": "bob@example.com" },
  { "id": 3, "name": "Charlie", "status": "active" }
];

The Fix: Don't assume the first object is representative. Instead, iterate through the entire dataset first to compile a comprehensive list of all unique keys. This ensures every possible column is created.

function createRobustTable(data, containerId) {
  const container = document.getElementById(containerId);
  if (!data.length) return;

  // Step 1: Collect all unique headers
  const allHeaders = new Set();
  data.forEach(obj => {
    Object.keys(obj).forEach(key => allHeaders.add(key));
  });
  const headers = Array.from(allHeaders);

  // Create table and header
  const table = document.createElement('table');
  // ... (thead creation is the same as before, using the new 'headers' array)

  // Step 2: Build rows, checking for key existence
  const tbody = document.createElement('tbody');
  data.forEach(obj => {
    const row = document.createElement('tr');
    headers.forEach(header => {
      const cell = document.createElement('td');
      // Use obj[header] if it exists, otherwise an empty string
      cell.textContent = obj[header] || ''; 
      row.appendChild(cell);
    });
    tbody.appendChild(row);
  });
  table.appendChild(tbody);

  container.innerHTML = '';
  container.appendChild(table);
}

// This will now create columns for 'id', 'name', 'email', and 'status'.

This approach guarantees that your table structure is complete and can accommodate any object in the dataset, gracefully leaving cells blank where data is missing.

Fix #2: Dealing with Nested JSON Objects

The Problem: Often, a JSON property's value isn't a simple string or number, but another object. Our basic script would render this as the unhelpful string `[object Object]`.

const nestedData = [
  {
    "id": 101,
    "product": "Laptop",
    "supplier": { "name": "TechCorp", "location": "USA" }
  }
];

The Fix: You need a strategy for handling nested data. One common approach is to "flatten" the data by combining parent and child keys (e.g., `supplier.name`). Another is to format the object into a readable string. Let's modify our cell-creation logic to handle this.

// Inside the row-building loop:
headers.forEach(header => {
  const cell = document.createElement('td');
  const value = obj[header];

  if (typeof value === 'object' && value !== null) {
    // Strategy: Display as a key-value list
    cell.innerHTML = Object.entries(value)
      .map(([k, v]) => `${k}: ${v}`)
      .join('
');
  } else {
    cell.textContent = value || '';
  }
  row.appendChild(cell);
});

This code checks if a value is an object. If so, it formats it into a more readable multi-line display within the cell. For more complex scenarios, you might consider a recursive flattening function before rendering begins.

Fix #3: Sanitizing Data to Prevent XSS Attacks

The Problem: What if your JSON data contains malicious code? If you inject it directly into the page using `innerHTML`, you are opening a door for Cross-Site Scripting (XSS) attacks.

const maliciousData = [
  {
    "id": 666,
    "name": "Hacker",
    "comment": ""
  }
];

The Fix: Never trust your data. The golden rule is to avoid `innerHTML` when inserting data. Instead, use `textContent`. This property automatically escapes any HTML-like content, treating it as plain text and rendering it harmlessly on the screen.

Our baseline script already did this correctly, but it's a critical point to emphasize. Let's look at the right way and the wrong way.

// WRONG - VULNERABLE TO XSS
cell.innerHTML = obj[header]; // Malicious script will execute

// RIGHT - SAFE
cell.textContent = obj[header]; // Malicious script is displayed as harmless text

By consistently using `textContent` for data and `createElement` for structure, you build a secure-by-default table component.

Fix #4: Managing Large Datasets with Pagination

The Problem: Your API returns a JSON array with 10,000 items. Trying to render all of them into a single HTML table will cause the user's browser to lag, become unresponsive, or even crash. The DOM is not optimized for thousands of simultaneous element insertions.

The Fix: Implement client-side pagination. Render the data in smaller, manageable chunks (e.g., 10-50 rows per page) and provide controls for the user to navigate through the pages. This dramatically improves performance and user experience.

// State management for pagination
let currentPage = 1;
const rowsPerPage = 10;

function renderPaginatedTable(fullData) {
  const startIndex = (currentPage - 1) * rowsPerPage;
  const endIndex = startIndex + rowsPerPage;
  const paginatedData = fullData.slice(startIndex, endIndex);

  // Call your table creation function with this smaller chunk
  createRobustTable(paginatedData, 'table-container');

  // Update pagination controls (e.g., 'Page 1 of 1000')
  updatePaginationUI(fullData.length);
}

// You'll also need event listeners for 'Next' and 'Previous' buttons
// that increment/decrement 'currentPage' and call renderPaginatedTable().

This approach keeps the DOM light and the application snappy, regardless of the total dataset size.

Fix #5: Custom Formatting for Data Readability

The Problem: Raw data is often not user-friendly. ISO date strings (`2025-01-15T10:00:00.000Z`), boolean values (`true`/`false`), or large numbers need formatting to be easily understood.

The Fix: Create a flexible rendering system that can apply specific formatting based on the data's key or type. This makes your table far more professional and easier to read.

function formatCell(key, value) {
  if (value === null || value === undefined) return '';

  // Date formatting
  if (key.toLowerCase().includes('date') || key.toLowerCase().includes('at')) {
    return new Intl.DateTimeFormat('en-US').format(new Date(value));
  }

  // Boolean formatting
  if (typeof value === 'boolean') {
    return value ? 'Yes' : 'No';
  }

  // Currency formatting (example)
  if (key.toLowerCase() === 'price') {
    return new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(value);
  }

  return value;
}

// In your table creation loop, use this formatter:
cell.textContent = formatCell(header, obj[header]);

This centralized formatting function keeps your rendering logic clean and can be easily extended to handle new data types as your application grows.