How to Convert JSON to Table in JavaScript

If you've ever worked with an API response or a JSON dataset and needed to display it as a structured table, you're not alone. This is one of the most common tasks in frontend and backend JavaScript development — and there are several ways to do it depending on your use case.

---

The Manual Way: Vanilla JavaScript

For simple use cases, you can build an HTML table from JSON directly in the browser using plain JavaScript.

JAVASCRIPT

const data = [
  { name: "Ada", role: "Engineer", department: "Product" },
  { name: "Grace", role: "Scientist", department: "Research" },
  { name: "Alan", role: "Architect", department: "Infrastructure" }
];

function jsonToTable(data) {
  if (!data || data.length === 0) return "<p>No data</p>";

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

  const headerRow = headers.map(h => `<th>${h}</th>`).join("");
  const bodyRows = data.map(row => {
    const cells = headers.map(h => `<td>${row[h] ?? ""}</td>`).join("");
    return `<tr>${cells}</tr>`;
  }).join("");

  return `
    <table border="1" cellpadding="8" cellspacing="0">
      <thead><tr>${headerRow}</tr></thead>
      <tbody>${bodyRows}</tbody>
    </table>
  `;
}

document.getElementById("output").innerHTML = jsonToTable(data);

This works well for simple cases. But it has real limitations:

• No built-in support for CSV, Excel, or Markdown export
• You have to handle edge cases manually (nested objects, null values, large datasets)
• Styling and pagination require additional work
• Deduplication logic needs to be written from scratch

For production use cases — especially when you need to export in multiple formats or process data server-side — a dedicated API is a much better approach.

---

The Better Way: TableFromJSON API

The TableFromJSON API lets you convert JSON to structured table formats programmatically — including CSV, Excel (XLSX), HTML, and Markdown — with a single API call.

Prerequisites

• A free account at tablefromjson.com
• A Pro subscription to access the API and generate an API key

Basic Example: Convert JSON to CSV

JAVASCRIPT

const response = await fetch("https://tablefromjson.com/api/v1/convert", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
    "X-API-Key": "tfj_your_api_key_here"
  },
  body: JSON.stringify({
    format: "csv",
    filename: "team-export",
    data: [
      { name: "Ada", role: "Engineer", department: "Product" },
      { name: "Grace", role: "Scientist", department: "Research" },
      { name: "Alan", role: "Architect", department: "Infrastructure" }
    ]
  })
});

const blob = await response.blob();
const url = URL.createObjectURL(blob);
const a = document.createElement("a");
a.href = url;
a.download = "team-export.csv";
a.click();

That's it. The API returns a downloadable file directly.

Export to Excel (XLSX)

Just change the format field:

JAVASCRIPT

body: JSON.stringify({
  format: "xlsx",
  filename: "team-export",
  data: [...]
})

Excel export is available on the Pro plan.

Export to HTML Table with Themes and Pagination

JAVASCRIPT

body: JSON.stringify({
  format: "html",
  filename: "customer-report",
  headers: ["Customer", "Plan", "MRR"],
  original_headers: ["name", "plan", "mrr"],
  options: {
    sortable: true,
    pagination: true,
    rows_per_page: 25,
    theme: "modern"
  },
  data: [
    { name: "ACME Corp", plan: "Pro", mrr: 1250 },
    { name: "Initech", plan: "Starter", mrr: 299 }
  ]
})

This gives you a fully styled, sortable, paginated HTML table — no extra frontend work required.

Export to Markdown

Useful for documentation, GitHub READMEs, or Notion:

JAVASCRIPT

body: JSON.stringify({
  format: "md",
  data: [
    { feature: "CSV Export", free: "✓", pro: "✓" },
    { feature: "Excel Export", free: "✗", pro: "✓" },
    { feature: "API Access", free: "✗", pro: "✓" }
  ]
})

Deduplication: Remove Duplicate Rows Before Export

A common real-world problem is receiving duplicate records in your data. The API handles this natively:

JAVASCRIPT

body: JSON.stringify({
  format: "csv",
  remove_duplicates: true,
  deduplication_mode: "first",
  key_field: "email",  // Pro feature: deduplicate by a specific field
  data: [
    { name: "ACME", email: "ops@acme.com", mrr: 1250 },
    { name: "ACME", email: "ops@acme.com", mrr: 1250 }  // duplicate
  ]
})

The API will remove the duplicate and include metadata headers like X-Removed-Duplicates in the response so you know exactly what was cleaned.

---

Node.js Example

Using the API server-side with Node.js and the node-fetch package:

JAVASCRIPT

import fetch from "node-fetch";
import fs from "fs";

const response = await fetch("https://tablefromjson.com/api/v1/convert", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
    "X-API-Key": process.env.TFJ_API_KEY
  },
  body: JSON.stringify({
    format: "xlsx",
    filename: "report",
    data: [
      { product: "Widget A", sales: 320, revenue: 9600 },
      { product: "Widget B", sales: 185, revenue: 5550 }
    ]
  })
});

const buffer = await response.buffer();
fs.writeFileSync("report.xlsx", buffer);
console.log("Excel file saved.");

This is useful for automating report generation in pipelines, cron jobs, or backend services.

---

Manual vs API: When to Use Which

---

Summary

For quick prototypes or simple browser-based tables, the vanilla JavaScript approach works fine. But for anything production-ready — especially when you need multiple export formats, deduplication, or server-side processing — the TableFromJSON API saves you significant time.

• Free plan: Use the web interface to convert JSON to tables manually
• Pro plan: Unlock the API, Excel exports, advanced HTML themes, and key-based deduplication

Have questions about the API? Check out the full API documentation.