Отображение вложенного словаря в поле зрения

Question

У меня есть фрейм данных, в котором я группирую по столбцу, а затем преобразую этот фрейм данных в словарь.

context['data'] = "carrier_data": noDupsdf.groupby("market").apply(dict)

Полученные данные выглядят примерно так:

"ATL": {
  "currency": ["USD", "EUR", "CAD"],
  "amount": [1232, 22, 44],
 },
 "JFK": {
  "currency": ["GBP", "EUR"],
  "amount": [122, 442],
}

I 'Я хотел бы просмотреть данные и отобразить их соответствующим образом:

<ul style="list-style: none">
  <li style="display: inline-block">ATL</li>
  <li style="display: inline-block">JFK</li>
</ul>
<div class="first-container">

  <div class="card">
   <p>Currency: USD</p>
   <p>Amount: 1232</p>
 </div>

  <div class="card">
   <p>Currency: EUR</p>
   <p>Amount: 22</p>
 </div>

  <div class="card">
   <p>Currency: CAD</p>
   <p>Amount: 44</p>
 </div>

<div class="second-container">

  <div class="card">
   <p>Currency: GBP</p>
   <p>Amount: 122</p>
 </div>

  <div class="card">
   <p>Currency: EUR</p>
   <p>Amount: 442</p>
 </div>

Будет максимум три рынка.Как мне отобразить данные таким образом?

Answer 1

Вы должны преобразовать получившийся слабоумный

context['data'] = {market_name: zip(currency_data['currency'], currency_data['amount']) for market_name, currency_data in data.items()}

Тогда ваш шаблон будет выглядеть так:

{% for market_name, currency_data in data.items %}
    <div>
        {% for currency, amount in currency_data %}
            <div class="card">
                <p>Currency: {{ currency }}</p>
                <p>Amount: {{ amount }}</p>
            </div>
        {% endfor %}

    </div>
{% endfor %}