jinja2 fastapi, output dict to html not showing results

Question

i am trying to pass my searched result to a html page with jinja2 from fastapi.

here is my back end

@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"]})

and here is my sample data 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
    }
  }
}

here is my sample html output trying to output card only section but not cards2 dict

{% 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">$45.00</span>
                            <span>$40.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 %}

i can get 3 results from the loop but outputing from each of the card name and id is not shown out. i am not sure what did i do wrong here this time.

Where are you using either card2 or card in your template? It seems like you're using cards, which isn't either of the values you're assigning to the templateresponse? — MatsLindh
– MatsLindh, Commented Jan 20, 2022 at 12:59
sorry that is my typo, is actually card instead of cards edited it, is still not printing the values — user1897151
– user1897151, Commented Jan 20, 2022 at 13:01
You probably want to switch the names around so that the variable given to the template is actually named cards; it's very hard to read now. Also, since you're using a dict, you're probably going to get the key in the iteration, not the value. You can get all the values from the dict by iterating over the dictionary's values: for card in cards.values() — MatsLindh
– MatsLindh, Commented Jan 20, 2022 at 13:05
for card in cards.values() after using this, the value is printing instead. thanks alot, how about if i am interested in printing key and values as well? — user1897151
– user1897151, Commented Jan 20, 2022 at 13:12
You can use items() to get a tuple of both the key and the value: for key, value in cards.items() — MatsLindh
– MatsLindh, Commented Jan 20, 2022 at 13:25

MatsLindh · Accepted Answer · 2022-01-20 13:27:16Z

1

Make sure you use the same name when assigning the cards to the TemplateResponse as when you access it in the template (use cards in both places).

Since you're using a dict, you're going to get the key of the element when iterating over it with for, not the value.

You can get all the values from the dict by iterating over the dictionary's values instead:

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

Another option if you need both the key and the value is to iterate over items:

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

answered Jan 20, 2022 at 13:27

MatsLindh

53.5k5 gold badges70 silver badges97 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

jinja2 fastapi, output dict to html not showing results

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related