[FIXED] Flask/Jinja2 render multiple collection

Issue

I'm creating a MongoDB web application using pymango, Flask and Jinja2. In connect with the database and I have three collections, and I can insert new data in the collection but when I render in HTML using Jinja2 I get duplicated rows with same data twice basically. I'm new to python and Jinja.

    enter code here
@app.route("/addcar", methods=["GET", "POST"])
def addcar():
    if request.method == "POST":
        cars = {
            "car_image": request.form.get("car_image"),
            "car_year": request.form.get("car_year"),
            "car_name": request.form.get("car_name"),
            "car_design": request.form.get("car_design"),
            "car_driver1": request.form.get("car_driver1"),
            "car_driver2": request.form.get("car_driver2")
        }
        
        specs = {
            "spec_engine": request.form.get("spec_engine"),
            "car_power": request.form.get("car_power"),
            "trasmission": request.form.get("trasmission")
        }
        
        stats = {
            "races": request.form.get("races"),
            "wins": request.form.get("wins"),
            "podiums": request.form.get("podiums"),
            "poles": request.form.get("poles"),
            "fast_laps": request.form.get("fast_laps"),
            "constructor_champ": request.form.get("constructor_champ"),
            "drivers_champ": request.form.get("drivers_champ"),
            "description": request.form.get("description")
        }
        
        mongo.db.cars.insert_one(cars)
        mongo.db.specs.insert_one(specs)
        mongo.db.stats.insert_one(stats)
        flash("Car Successfully Added")
        return redirect(url_for("get_cars"))
    return render_template("addcar.html")`

enter code here

    enter code here
{% extends "base.html" %}
{% block content %}

<div class="row row justify-content-center mt-4">
    {% for car in cars %}

    <div class="card mb-3" style="max-width: 840px;">

        <div class="row g-0">
            <div class="col-md-4">
                <img src="{{ car.car_image }}" class="imgCard" alt="ferrari image">
            </div>
            <div class="col-md-8">
                <div class="card-body">
                    <ul class="list-group list-group-flush">

                        <li class="list-group-item"><strong>Year</strong>: {{ car.car_year }}</li>
                        <li class="list-group-item"><strong>Name</strong>: {{ car.car_name }}</li>
                        <li class="list-group-item"><strong>Designer</strong>: {{ car.car_design }}</li>

                    </ul>
                    {% for spec in specs %}
                    <ul class="list-group list-group-flush">


                        <li class="list-group-item"><strong>Engine</strong>: {{ spec.spec_engine }}</li>
                        <li class="list-group-item"><strong>Power</strong>: {{ spec.car_power }}</li>
                        <li class="list-group-item"><strong>Trasmission</strong>: {{ spec.trasmission }}</li>


                    </ul>
                    {% endfor %}
                </div>


            </div>

        </div>

    </div>

    {% endfor %}


</div>


    enter code here

{% endblock %}

Solution

If your html file looks something like this, it will not show replicated statements.

{% extends "base.html" %}
{% block content %}

<div class="row row justify-content-center mt-4">
    

    <div class="card mb-3" style="max-width: 840px;">

        <div class="row g-0">
            <div class="col-md-4">
                <img src="{{ car['car_image'] }}" class="imgCard" alt="ferrari image">
            </div>
            <div class="col-md-8">
                <div class="card-body">
                    <ul class="list-group list-group-flush">

                        <li class="list-group-item"><strong>Year</strong>: {{ car['car_year' }}</li>
                        <li class="list-group-item"><strong>Name</strong>: {{ car['car_name'] }}</li>
                        <li class="list-group-item"><strong>Designer</strong>: {{ car['car_design'] }}</li>
                    
                    </ul>
             
                    <ul class="list-group list-group-flush">


                        <li class="list-group-item"><strong>Engine</strong>: {{ spec['spec_engine'] }}</li>
                        <li class="list-group-item"><strong>Power</strong>: {{ spec['car_power'] }}</li>
                        <li class="list-group-item"><strong>Trasmission</strong>: {{ spec['trasmission'] }}</li>


                    </ul>
            
                </div>


            </div>

        </div>

    </div>


</div>

{% endblock %}

In your flask views, change the return statement to this,

 return render_template("addcar.html", car=cars, spec=specs)

Assuming that the html written above is the

Answered By - Harris Minhas