How to display data from MongoDB in HTML table using Python
In this article, you will learn the simple process for displaying 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, and 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-
Related Articles
Convert MongoDB Document to JSON using PythonInsert 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