JSON to HTML Table

How it works

Paste your JSON into the left pane; the HTML table code appears on the right straight away. An array of objects (records in curly braces inside square brackets) becomes a table row by row: the column headers are the union of the keys across all records, and a field missing from a record stays an empty cell. Paste a single object and you get a two-column "Field / Value" table. The sample holds two people; the second has no state but has a "note" field. With Flatten, the address object splits into address.city and address.state columns, the result is 2 rows by 5 columns, and missing cells are left empty. With Inner table, a small table is drawn inside the address cell. Simple lists such as [1, 2, 3] are written as "1, 2, 3". Text like "Price < 100 & in stock" is escaped with &lt; and &amp;; it looks the same on the page, but the browser does not mistake it for a tag. Paste the code into a WordPress "Custom HTML" block or into the source view of an email template.

This tool is also known as json to html, json to html table, json to html converter, convert json to table, json table viewer, json to html table online.

What is JSON?

JSON (JavaScript Object Notation) is a common format for carrying data as text. Curly braces {} hold an object made of key-value pairs, square brackets [] hold an ordered list; values can be text, numbers, true/false, null, or again objects and lists. Most web services and apps send their data as JSON. JSON is readable text, but it has no visual layout such as a table; to show it on a page, it needs to be turned into HTML.

What is Flattening?

Flattening gathers every value of a nested structure under a single-level key. The path is written by joining keys with dots: {"address": {"city": "Denver"}} becomes address.city = Denver. That way nested data fits a table of rows and columns. Flattening loses no information, but in very deep structures or objects with many fields it quickly multiplies the number of columns; there, an inner table is easier to read.

What is the difference between JSON to CSV and JSON to HTML table?

Both arrange JSON records into rows and columns, but the output goes to different places. CSV is data only; it is meant to be opened in Excel or imported into another program and carries no layout. An HTML table is code written with tags; it is meant to be displayed directly on a web page, in a blog post or in an HTML email, and it can carry structures like header cells and inner tables. Choose CSV to work with the data and an HTML table to show it.

Flatten or inner table

Flattening turns every field of a nested object into its own column, joined with dots: {"address": {"city": "Denver"}} writes Denver into an address.city column. The table stays one level deep; it can be sorted by column, and when copied into Excel the cells land in the right place. In most cases this is the right choice.

An inner table keeps the nested structure as it is: a small table with city and state rows is drawn inside the address cell. When records carry sub-objects of different depths or with many fields (such as a list of items inside an order), inner tables stay readable where flattening would produce dozens of columns. In this mode, arrays of objects become inner tables too.

• {"address": {"city": "Denver"}} → flatten: address.city column
• [{"a":1},{"b":2}] → columns a and b, gaps left empty
• "<b>new</b>" → &lt;b&gt;new&lt;/b&gt; (not turned into bold)

Escaping: why JSON text is not dropped in as it is

JSON data often comes from an API or from a form that users fill in. If a field contains text like <script> or <img onerror=...> and that text reaches the page unescaped, code can run in the visitor's browser; this is called cross-site scripting (XSS). This tool escapes every key and value with the he library: <, >, &, quotes and apostrophes become entity names.

Escaped text looks exactly the same on the page; the only thing lost is the chance of it being read as code. To style the table, leave the code as it is and write CSS rules for table, th and td on your site; with a ready-made theme, the table already takes on the theme's look.

Frequently asked questions

How do I convert JSON to an HTML table?

Paste the JSON into the left pane. For an array of objects, each object becomes a row and each key a column; a single object becomes a Field/Value table. Copy the code from the right pane into your page's HTML editor.

What if records have different fields?

Columns are the union of the keys across all records, in the order they first appear. A field missing from a record gets an empty cell; no value shifts or lands under the wrong column.

How does nested JSON look in the table?

With "Nested objects" set to "Flatten", you get dotted column names like address.city. Choose "Inner table" and nested objects and lists of objects are written into a separate small table inside the cell.

Is the data I paste sent anywhere?

No. The conversion runs entirely in your browser; even a customer list or an API response never leaves this page.