Q100105: [JSON] Render Html

Renders a block of JSON data to HTML for visualization purposes.

(Italics = required parameter)

Notes

The [JSON] Render Html module is used for taking a block of JSON data, and rendering to an HTML table that can be included for display in a variety of places. The module does a best job interpretation of the JSON data. Below is an example of a JSON block of data, and the resultant HTML table.

[
  {
    "CategoryID": 1,
    "CategoryName": "Beverages",
    "Description": "Soft drinks, coffees, teas, beers, and ales"
  },
  {
    "CategoryID": 2,
    "CategoryName": "Condiments",
    "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
  },
  {
    "CategoryID": 3,
    "CategoryName": "Confections",
    "Description": "Desserts, candies, and sweet breads"
  },
  {
    "CategoryID": 4,
    "CategoryName": "Dairy Products",
    "Description": "Cheeses"
  },
  {
    "CategoryID": 5,
    "CategoryName": "Grains/Cereals",
    "Description": "Breads, crackers, pasta, and cereal"
  },
  {
    "CategoryID": 6,
    "CategoryName": "Meat/Poultry",
    "Description": "Prepared meats"
  },
  {
    "CategoryID": 7,
    "CategoryName": "Produce",
    "Description": "Dried fruit and bean curd"
  },
  {
    "CategoryID": 8,
    "CategoryName": "Seafood",
    "Description": "Seaweed and fish"
  }
]

The above block of data was generated by a SQL query used on the data in the Microsoft Northwind database by selecting all the items in the Category table. When this block is provided to the [JSON] Render Html module, it emits HTML which looks like this block below.

<div class="JsonToHtml"><table><tr><td></td><td><table border="1"><tr><th>CategoryID</th><th>CategoryName</th><th>Description</th></tr><tr><td>1</td><td>Beverages</td><td>Soft drinks, coffees, teas, beers, and ales</td></tr><tr><td>2</td><td>Condiments</td><td>Sweet and savory sauces, relishes, spreads, and seasonings</td></tr><tr><td>3</td><td>Confections</td><td>Desserts, candies, and sweet breads</td></tr><tr><td>4</td><td>Dairy Products</td><td>Cheeses</td></tr><tr><td>5</td><td>Grains/Cereals</td><td>Breads, crackers, pasta, and cereal</td></tr><tr><td>6</td><td>Meat/Poultry</td><td>Prepared meats</td></tr><tr><td>7</td><td>Produce</td><td>Dried fruit and bean curd</td></tr><tr><td>8</td><td>Seafood</td><td>Seaweed and fish</td></tr></table></td></tr></table></div>

This then will render as seen in the following table.