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 HTML Table using Python.

MongoDB is a NoSQL, open source, document-oriented database management system. This is suitable for modern internet applications. Python provides pymongo module to easily connect with MongoDB.

Step by Step process to fetch data from MongoDB

Install PyMongo Module

At first, we need to install pymongo module. We can install this using 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 on terminal window to start the mongodb daemon.

$ mongod

Import the pymongo in Python file to connect to the database. After importing, create 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 whole information on a webpage in 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 in a 'contents' variable. In this template, we have passed the above list variable stud within 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 Python package. This module provides feature to open webpage on the browser. In the below code, we have created an HTML file and placed the above generated HTML content and render 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 in chunks to explain the step by step process to display data from MongoDB to HTML Table. Here, we merge that all 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 -

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