Display JSON Data in HTML Page

In today’s tech-savvy world, data visualization plays a pivotal role in presenting information effectively and comprehensively. The ability to generate dynamic reports using JSON data and templates in various formats like Word documents, spreadsheets, or text format is crucial for developers and businesses alike. In this blog post, we will guide Python developers on how to leverage GroupDocs.Assembly Cloud REST API and its Python SDK to upload report data in the form of JSON and a template file, and then display the generated reports on an HTML page. The API provides an array of features such as charts, tables, images, barcodes, and more to create visually engaging and informative reports.

Prerequisites:

Before getting started, make sure you have the following in place:

  • Python installed on your system.
  • GroupDocs.Assembly Cloud SDK for Python installed.
  • An active GroupDocs.Assembly Cloud account with valid API credentials.
  • Sample data and templates for testing (we will use the following sample JSON data and report template).

Sample JSON Data

Save the following data in a JSON file.

\[
	{
		"Name":"John Smith","Contract":\[
		{"Client":{"Name":"A Company"},"Price":1200000},
		{"Client":{"Name":"B Ltd."},"Price":750000},
		{"Client":{"Name":"C & D"},"Price":350000}\]
	},
	{
		"Name":"Tony Anderson","Contract":\[
		{"Client":{"Name":"E Corp."},"Price":650000},
		{"Client":{"Name":"F & Partners"},"Price":550000}\]
	},
	{
		"Name":"July James","Contract":\[
		{"Client":{"Name":"G & Co."},"Price":350000},
		{"Client":{"Name":"H Group"},"Price":250000},
		{"Client":{"Name":"I & Sons"},"Price":100000},
		{"Client":{"Name":"J Ent."},"Price":100000}\]
	}
\]

Sample Template

Create the following template in TXT, DOCX, or the required format to iterate Managers’ data along with their respective Clients and details. Then proceed with the code for report generation.

<<foreach [in managers]>>Manager: <<[Name]>>
Contracts:
<<foreach [in Contract]>>- <<[Client.Name]>> ($<<[Price]>>)
<</foreach>>
<</foreach>>

Points to be covered:

Configure the Python HTML Report Generator SDK

To begin with, install GroupDocs.Assembly Cloud SDK for Python to your Python project with pip (package installer for Python) using the following command in the console:

pip install groupdocs-assembly-cloud

Launch the API Client

Now, please get your Client ID and Client Secret from the dashboard and add the code as shown below:

Upload the Data Source and Template Files

Firstly, upload the data source and template files to the cloud using the code example given below:

As a result, the uploaded files will be available in the [files section][https://dashboard.groupdocs.cloud/files] of your dashboard on the cloud.

Display JSON Data on an HTML Page using Python

To display JSON data on an HTML page, please follow the steps given below:

  1. Create an instance of AssemblyApi with client_id and client_secret.
  2. Set up template information with a file path, storage name, version ID, and password.
  3. Prepare the assemble request using AssembleOptions with report data, template info, output path, and save format.
  4. Generate the HTML report using AssemblyApi.assemble_document(AssembleOptions) method.

The following code example shows how to display JSON data on an HTML page using Python SDK for HTML report generator REST API.

Download HTML File

The code given in the previous step saves the converted HTML file on the cloud. To download it, you can use the following code snippet.

Conclusion

In this blog post, we have covered the process of displaying JSON data on an HTML page using GroupDocs.Assembly Cloud REST API and its Python SDK. This powerful API allows developers to effortlessly generate dynamic reports in various formats, leveraging data from JSON or XML sources and templates in different formats like Word documents, spreadsheets, or text files.

Furthermore, you can learn more about GroupDocs.Assembly Cloud API using the documentation. We also provide an API reference section that lets you visualize and interact with our APIs directly through the browser. Python SDK’s complete source code is freely available on Github.

Finally, we keep writing new blog articles on different file formats and parsing them using REST API. So, please get in touch for the latest updates. Happy coding!

Ask a question

In case you would have any queries or confusion about the HTML report generator, please feel free to contact us via our forum.

See Also

Here are some related articles that you may find helpful: