Python -Flask I want to display the data that present in Mongodb on a html page in clean format

Question

I have a list of questions data in Mongodb database. I want to display question by question on html page. This is my Flask code

from flask import Flask, render_template, request, url_for
from pymongo import MongoClient
from bson.json_util import dumps
import json

client = MongoClient('localhost:27017')
db = client.girish

app = Flask(__name__)
@app.route("/questions", methods = ['GET'])
def questions():
    try:
        names = db.questions.find({},{"ques":1,"options":1,"_id":0,"quesid":1,"ans":1}).limit(10)
        return render_template('index.html', names=names)
        #return dumps(names)
    except Exception as e:
        return dumps({'error' : str(e)})

@app.route("/answers", methods = ['POST'])
def answers():
    try:
        data = json.loads(request.data)
        quesid = data['quesid']
        yourans = data['yourans']
        if quesid and yourans:
            status = db.myanswers.insert_one({
                "quesid" : quesid,
                "yourans" : yourans
            })
        return dumps({'message' : 'SUCCESS'})
    except Exception as e:
        return dumps({'error' : str(e)})

@app.route("/myanswers", methods = ['GET'])
def myanswers():
    try:
        answers = db.myanswers.find({},{"quesid":1,"yourans":1})
        return dumps(answers)
    except Exception as e:
        return dumps({'error' : str(e)})

@app.route("/check/<id>", methods = ['GET','POST'])
def check(id):
    try:
        doc=db.questions.find({'quesid':float(id)})
        return dumps(doc)
    except Exception as e:
        return dumps({'error': str(e)})




if __name__ == '__main__':
     app.run(port='5002',debug = True)

What is the possible ways that I can display the data present in monodb on html page?? I'm new to python web development. please help me out in a detailed process.

This is my mogodb injection code with python

import pymongo

myclient = pymongo.MongoClient("mongodb://localhost:27017/")
mydb = myclient["girish"]
mycol = mydb["questions"]

mylist = [
 {

        "ques" : "what is test?",
        "options" : [
                {
                        "op1" : "test",
                        "op2" : "test",
                        "op3" : "test"
                }
        ],
        "quesid" : 1,
        "ans" : 1
},
{

        "ques" : "what is test2?",
        "options" : [
                {
                        "op1" : "test",
                        "op2" : "test",
                        "op3" : "test"
                }
        ],
        "quesid" : 2,
        "ans" : 1
},
{

        "ques" : "what is test3?",
        "options" : [
                {
                        "op1" : "test",
                        "op2" : "test",
                        "op3" : "test"
                }
        ],
        "quesid" : 3,
        "ans" : 1
},
{

        "ques" : "what is test4?",
        "options" : [
                {
                        "op1" : "test",
                        "op2" : "test",
                        "op3" : "test"
                }
        ],
        "quesid" : 4,
        "ans" : 1
},
{

        "ques" : "what is test5?",
        "options" : [
                {
                        "op1" : "test",
                        "op2" : "test",
                        "op3" : "test"
                }
        ],
        "quesid" : 5,
        "ans" : 1
},
]

x = mycol.insert_many(mylist)

How can I create a html page and how to link with my database?

Answer 1

How can I create an HTML page?

Flask uses something called as jinja templates which has a specific syntax. It combines HTML structure and your data to return an HTML page populated with data to be displayed in the browser

How to link with my database?

I see you are using PyMongo to feed and read data from MongoDB which is perfect.

Now the linking part,

Create a python function to access data from database, put it into a python variable, use all required logic and then pass that python variable to the html template. You will have to provide a unique url which a web browser will use to invoke this function using @app.route

I am writing a sample code to display all questions from questions collection

@app.route("/questions", methods = ['GET'])
def questions():
    try:
        questions = db.questions.find({},{"ques":1,"ans":1})
        return render_template('questions.html', questions = questions)
    except Exception as e:
        return dumps({'error' : str(e)})

Now the template which renders data - Jinja 2 template provides a way to display values of python variables in a html file. Jinja allows you to use conditional statements (if-else) as well as for loops for appropriate use cases.

Questions.html

<!doctype html>
<html>
   <body>
         {% for question in questions %}
            <h3>{{question["ques"]}}</h3>
         {% endfor %}
   </body>
</html>