How to display data from MongoDB in HTML table using Python

In this article, you will learn the simple process to display data from MongoDB in an HTML table using the Python programming language.

MongoDB is a NoSQL, open source, document-oriented database management system. This is suitable for modern internet applications. It provides dynamic queries, scalability, secondary indexes, fast atomic updates, and we can easily use more than one database in a project. Python provides the pymongo module to easily connect with MongoDB.

Step by Step process to fetch data from MongoDB

Install PyMongo Module

First, we need to install the pymongo module. We can install this using the PIP tool.

(env) c:\python37\Scripts\projects>pip install pymongo

On successful installation, it returns something like this-

Collecting pymongo
  Downloading pymongo-3.10.1-cp37-cp37m-win_amd64.whl (354 kB)
     |████████████████████████████████| 354 kB 284 kB/s
Installing collected packages: pymongo
Successfully installed pymongo-3.10.1

Import module and connect to host and port

Once installed, use the following command in a terminal window to start the mongodb daemon.

$ mongod

To connect to the database, import pymongo into the Python file. After importing, create an instance of MongoClient and establish a connection to the default host, i.e., localhost and port 27017.

import pymongo

client = pymongo.MongoClient("mongodb://localhost:27017/")

Suppose we have a collection name "students" that contains name, age and section. We want to display the student's whole information on a webpage in an HTML table.

(env) c:\python37\Scripts\projects>readcsv.py
{'_id': ObjectId('5e70b0d97cff592555515229'), 'name': 'Priska Somya', 'age': 12, 'section': '6A'}
{'_id': ObjectId('5e81e85b73c41dca6835b168'), 'name': 'Alaya', 'age': '12', 'section': '6A'}
{'_id': ObjectId('5e81e85b73c41dca6835b169'), 'name': 'Carle', 'age': '14', 'section': '7C'}
{'_id': ObjectId('5e81e85b73c41dca6835b16a'), 'name': 'Amma', 'age': '11', 'section': '5B'}

Here, we have accessed the 'students' collection data. MongoDB provides the find() method to return the document or documents based on the specified criteria.

import pymongo

client = pymongo.MongoClient("mongodb://localhost:27017/")
mydb = client["school"]
mycol = mydb["students"]

stud = []

tbl="<tr><td>Name</td><td>Age</td><td>Section</td></tr>"
stud.append(tbl)

for y in mycol.find():
    a = "<tr><td>%s</td>"%y['name']
    stud.append(a)
    b = "<td>%s</td>"%y['age']
    stud.append(b)
    c = "<td>%s</td></tr>"%y['section']
    stud.append(c)

Create HTML Template

Next, we have created an HTML template and stored it in a 'contents' variable. In this template, we have passed the above list variable stud within the HTML table element.

contents = '''<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>Python Webbrowser</title>
</head>
<body>
<table>
%s
</table>
</body>
</html>
'''%(stud)

Web Browser Module

The webbrowser module is by default available with the Python package. This module includes a feature that allows you to open a webpage in your browser. In the given code, we have created an HTML file and placed the above generated HTML content in it, rendering it in a web browser.

filename = 'webbrowser.html'

def main(contents, filename):
    output = open(filename,"w")
    output.write(contents)
    output.close()

main(contents, filename)    
webbrowser.open(filename)

Complete Code

At the start of this article, we have divided the complete code into chunks to explain the step-by-step process of displaying display data from MongoDB to HTML Table. Here, we merge that all together to get the complete code.

import pymongo
import webbrowser

client = pymongo.MongoClient("mongodb://localhost:27017/")
mydb = client["school"]
mycol = mydb["students"]

stud = []

tbl = "<tr><td>Name</td><td>Age</td><td>Section</td></tr>"
stud.append(tbl)

for y in mycol.find():
    a = "<tr><td>%s</td>"%y['name']
    stud.append(a)
    b = "<td>%s</td>"%y['age']
    stud.append(b)
    c = "<td>%s</td></tr>"%y['section']
    stud.append(c)

contents = '''<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>Python Webbrowser</title>
</head>
<body>
<table>
%s
</table>
</body>
</html>
'''%(stud)

filename = 'webbrowser.html'

def main(contents, filename):
    output = open(filename,"w")
    output.write(contents)
    output.close()

main(contents, filename)    
webbrowser.open(filename)

The above code returns the following output to the browser -

Convert MongoDB Document to JSON using Python
Insert XML data to MongoDB using Python
Insert JSON data into MongoDB using Python
CRUD operations in Python using MongoDB connector
Write Python Pandas Dataframe to CSV
Quick Introduction to Python Pandas
Python Pandas DataFrame
Python3 Tkinter Messagebox
Python get visitor information by IP address
Python Webbrowser
Python Tkinter Overview and Examples
Python Turtle Graphics Overview
Factorial Program in Python
Python snake game code with Pygame
Python JSON Tutorial- Create, Read, Parse JSON file
Python convert xml to dict
Python convert dict to xml
Convert MySQL query result to JSON in Python
Insert XML Data to MySQL Table using Python
CRUD operations in Python using MYSQL
Python Converting a CSV File to a MySQL
Django upload image to database
Django Export Model Data to CSV