CS50 - Jinja formatting in HTML

Question

I'm having trouble with the formatting of my jinja for loop. It's a name generator that generates a first and last name. I am combining the first and last name in my code but when it outputs to the HTML file its not formatted and has brackets. I'm not really sure where to modify it and this is probably something simple I'm missing. Your help would be greatly appreciated. Thank you!

Python Code

from cs50 import SQL
from flask import Flask, render_template, render_template_string, request
from tempfile import mkdtemp
import random

# Configure application
app = Flask(__name__)

# Ensure templates are auto-reloaded
app.config["TEMPLATES_AUTO_RELOAD"] = True

# Configure CS50 Library to use SQLite database
db = SQL("sqlite:///names.db")



@app.route("/")
def index():
    return render_template("index.html")

@app.route("/results", methods=["POST"])
def results():
    gender = request.form.get("gender")
    number_results = int(request.form.get("number_results"))

    results = []

    for i in range(number_results):
        if gender == "male":
            random_id_male = random.randint(1, 1000)
            random_id_last = random.randint(1, 1000)
            male_name = db.execute("SELECT name FROM male_names WHERE id = ?", random_id_male)
            last_name = db.execute("SELECT name FROM last_names WHERE id = ?", random_id_last)
            total_male = male_name + last_name
            results.append(total_male)
        elif gender == "female":
            random_id_female = random.randint(1, 1000)
            random_id_last = random.randint(1, 1000)
            female_name = db.execute("SELECT name FROM female_names WHERE id = ?", random_id_female)
            last_name = db.execute("SELECT name FROM last_names WHERE id = ?", random_id_last)
            total_female = female_name + last_name
            results.append(total_female)
        elif gender == "other":
            random_id_other = random.randint(1, 300)
            random_id_last = random.randint(1, 1000)
            other_name = db.execute("SELECT name FROM other_names WHERE id = ?", random_id_other)
            last_name = db.execute("SELECT name FROM last_names WHERE id = ?", random_id_last)
            total_other = other_name + last_name
            results.append(total_other)

    return render_template("index.html", results=results)

HTML for index



  
  

  
  
  

  

  Fantasy Name Generator



  
  
    
      
        
          Fantasy Name Generator
        
      
    
  
  


  
  
      
      
        
        Male
      
      
        
        Female
      
      
        
        Neutral
      
      
        results
        
    
    
  
      
      
        
        {% for result in results %}
            {{ result }}
        {% endfor %}

What the output looks like on the index.html page

[{'name': 'Oswaldo'}, {'name': 'Navarro'}]
[{'name': 'Jamir'}, {'name': 'Wagner'}]
[{'name': 'Rodrigo'}, {'name': 'Valenzuela'}]
[{'name': 'Davion'}, {'name': 'Molina'}]
[{'name': 'Zechariah'}, {'name': 'Austin'}]
[{'name': 'Jace'}, {'name': 'Conner'}]
[{'name': 'Valentino'}, {'name': 'Zavala'}]
[{'name': 'Kadin'}, {'name': 'Leblanc'}]
[{'name': 'Emmanuel'}, {'name': 'Mccann'}]
[{'name': 'Alexander'}, {'name': 'Erickson'}]

DinoCoderSaurus · Answer

cs50 execute method returns a list of dictionaries. list + list (as in total_other = other_name + last_name) returns one list with all the elements from both lists. append is appending a list. Therefore results is a list of lists, each list contains 2 dictionaries. One way to resolve this is to transform total_{genders} to strings, not a list of dictionaries, then append to results.

Each execute90 returns a list with exactly one dictionary element and each dictionary has exactly one key ('name'), so the data would be addressed as row[0]['name']. It is then elementary to build a string for each (2 part) name and append to the results list.

CS50 - Jinja formatting in HTML

1 Answers