jinja2 fastapi，输出字典到 html 不显示结果

Question

我正在尝试将我的搜索结果传递到带有来自 fastapi 的 jinja2 的 html 页面。

这是我的后端

@app.get("/api/search")
async def get_card_price(request: Request, card_search_keyword: str):
    card_results = await get_card_price(card_search_keyword)
    return templates.TemplateResponse("results.html", {"request": request,
                                                       "card": card_results["card"],
                                                       "card2": card_results["card2"]})

这是我的样本数据return

{
  "total_card2": 5,
  "total_card: 3,
  "card2": {
    "98275-JP": {
      "card_condition": "NM",
      "card_price": "¥ 6,500",
      "card_qty": "26",
      "other_condition": {}
    },
    "98709-JP": {
      "card_condition": "NM",
      "card_price": "¥ 6,500",
      "card_qty": "1",
      "other_condition": {}
    }
  },
  "card": {
    "LzgZK": {
      "card_name": "test2",
      "price_updated_date": "2022-01-20T09:05:16.314Z",
      "set_tag": "mh2",
      "rarity": "rare",
      "price_normal": 47.99,
      "price_foil": 99.99
    },
    "LKGxd": {
      "card_name": "test3,
      "price_updated_date": "2022-01-20T09:05:16.314Z",
      "set_tag": "mh2",
      "rarity": "rare",
      "price_normal": 49.99,
      "price_foil": 89.99
    },
    "k93K0": {
      "card_name": "test4",
      "price_updated_date": "2022-01-20T09:05:16.314Z",
      "set_tag": "pmh2",
      "rarity": "rare",
      "price_normal": null,
      "price_foil": 89.99
    }
  }
}

这是我的示例 html 输出试图只输出卡部分而不是 cards2 字典

{% for cards in card %}
                <div class="row gx-4 gx-lg-5 align-items-center">
                    <div class="col-md-3"><img class="card-img-top mb-5 mb-md-0" src='{{ cards["card_img_id"] }}' alt="..." /></div>
                    <div class="col-md-9">
                        <div class="small mb-1">{{ cards.card_name }}</div>
                        <h1 class="display-5 fw-bolder">{{ cards.card_name }}</h1>
                        <div class="fs-5 mb-5">
                            <span class="text-decoration-line-through">.00</span>
                            <span>.00</span>
                        </div>
                        <p class="lead">Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium at dolorem quidem modi. Nam sequi consequatur obcaecati excepturi alias magni, accusamus eius blanditiis delectus ipsam minima ea iste laborum vero?</p>
                        <div class="d-flex">
                            <input class="form-control text-center me-3" id="inputQuantity" type="num" value="1" style="max-width: 3rem" />
                            <button class="btn btn-outline-dark flex-shrink-0" type="button">
                                <i class="bi-cart-fill me-1"></i>
                                Add to cart
                            </button>
                        </div>
                    </div>
                </div>
                 <br /><br /><br /> <br /><br /><br />
                 {% endfor %}

我可以从循环中得到 3 个结果，但是没有显示每个卡片名称和 ID 的输出。我不知道这次我做错了什么。

Answer 1

确保在将卡片分配给 TemplateResponse 时使用与在模板中访问卡片时相同的名称（在两个地方都使用 cards）。

由于您使用的是字典，因此在使用 for 遍历元素时，您将获得元素的 key，而不是值。

您可以通过遍历字典的值来从字典中获取所有值：

{% for card in cards.values() %}

如果您同时需要键和值，另一种选择是遍历 items:

{% for key, card in cards.items() %}

jinja2 fastapi，输出字典到 html 不显示结果

jinja2 fastapi, output dict to html not showing results

python

jinja2

fastapi