How display mongodb data in html?

Question

I am able to connect to my database and see the data in an array using below code

Nội dung chính Show

Step by Step process to fetch data from MongoDB
Install PyMongo Module
Import module and connect to host and port
Create HTML Template
Web Browser Module
Complete Code
Related Articles
How display MongoDB data in HTML using flask?
How do I display records in MongoDB?
Can I use MongoDB with HTML and CSS?
How do I connect my MongoDB database to my website?

   app.get('/goalkeepers', (req, res) => {

     Transfer.find({}, (err, found)=>{
  if (err) {
    console.log(err);
      }

    else {
     res.json(found)

with Transfer being the schema model to connect to collection in database. When i load the html page i can see array of all saved data from db so thats cool, i know i can access it and its there and working.

But how can i show this data on an actual html page in nice format etc, not just the raw data.

of course I would render a specific page eg. res.render(pagename) where currently you can see res.json(found)

I googled a lot and mostly confusing as a newbie, surely can be a simple way to get this data on to my web pages?

thanks

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

How display MongoDB data in HTML using flask?

Introduction..

Prerequisites..

Step 1 — Setting Up PyMongo and Flask..

Step 2 — Connecting to the MongoDB Server and Creating a Collection..

Step 3 — Creating a Web Page for Adding and Displaying Todos..

Step 4 — Deleting Todos..

Conclusion..

How do I display records in MongoDB?

If you want to check your databases list, use the command show dbs. Your created database (mydb) is not present in list. To display database, you need to insert at least one document into it. In MongoDB default database is test.

Can I use MongoDB with HTML and CSS?

Yes, you can do that from the browser, but anything running in the browser (connection credentials, for example) can be seen by the user, so it's not secure. Alright, thanks for the answer!