Flask中Jinja模板嵌套for循环重复渲染同题问题排查

你的Jinja语法本身没有报错，但嵌套循环的逻辑和数据结构完全不匹配：

• 当前写法是双层循环：外层每取1道题，内层就会把所有答案完整遍历1遍。你拉取了50道题、50个对应答案，实际会渲染50*50=2500条内容：第1道题会重复显示50次，依次搭配全部50个答案，等内层答案循环跑完才会切到第2道题，再重复显示50次第2道题搭配所有答案，这就是你看到同一道题反复出现、答案挨个滚动的根本原因。
• 你的questions和answers是两个按下标一一对应的独立列表，questions[i]和answers[i]就是配对的题目和答案，根本不需要嵌套循环。

方案1：后端组装配对数据（推荐，避免索引错位） #

不要拆分传递两个独立列表，直接在后端把每道题和对应答案打包成结构化数据，前端单层遍历即可，从根源避免下标不匹配的问题。
修改app.py的路由逻辑：

from flask import Flask, render_template
from questionData import *

app = Flask(__name__)

@app.route('/')
def index():
    data = getQuestionData()
    # 组装题目+答案的配对列表
    qa_list = []
    for item in data['results']:
        qa_list.append({
            "question": item["question"],
            "answer": item["correct_answer"]
        })
    return render_template('index.html', qa_list=qa_list)

对应修改index.html，去掉双层循环，改用单层遍历：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Questions Application</title>
</head>
<body>
    <div>
        {% for qa in qa_list %}
        <h2>{{ qa.question }}</h2>
        <h3>正确答案：{{ qa.answer }}</h3>
        {% endfor %}
    </div>
</body>
</html>

方案2：保留现有后端逻辑，修改模板循环 #

如果你不想调整后端代码，可以利用Jinja循环自带的下标索引，同步取对应位置的答案，删掉内层循环即可：

<div>
    {% for question in questions %}
    <h2>{{ question }}</h2>
    <!-- loop.index0 是Jinja循环从0开始计数的下标，和列表索引对应 -->
    <h3>正确答案：{{ answers[loop.index0] }}</h3>
    {% endfor %}
</div>

注意：如果后续两个列表长度不一致，方案2会出现下标越界或者匹配错误，优先用方案1的结构化数据传参。

内容的提问来源于stack exchange，提问作者James Cook