python - 使用 Bootstrap 选项卡将 JSON 数据从数据库显示到 django 模板

Question

对不起，我是一个编程新手....但我正在尝试使用 Bootstrap 的选项卡导航来查看来自数据库的 JSON 数据。我正在将 JSON 数据转换为二维数组并将我的数据存储为以下字典:

tables = {u'table1': [[u'CS6140', u'Machine Learning', u'Sara 
                     Arunagiri'], [u'CS5100', u'Foundations of 
                     Artificial Intelligence ', u'Chris Amato'], 
                     [u'CS6220', u'Data Mining', u'Pablo Esteves']], 
          u'table2': [[u'Paris, France', u'06/01/2019 - 06/15/2019', 
                     u'James Fraser'], [u'Edinborough, Scotland', 
                     u'10/14/2019 - 10/20/2019', u'Claire  Beauchamp'], 
                     [u'Rome, Italy', u'12/14/2019-12/24/2019', 
                     u'Timothy Dalton']], 
          u'table3': [[32423, u'iced coffee', 3.67], [34241, u'bagel', 
                     2.99], [3109247, u'sanwich', 5.99]]}

因此每个表 dict 条目对应一个表。所以我试图遍历字典和二维数组来创建不同的表。

我目前正在尝试按如下方式遍历字典，但我正在为每个表复制 3 次二维数组，而我希望字典中的每个表只为每个选项卡显示一次。

            {% for table in tables %}
            <div class="tab-content">

                <div id="{{ table }}" class="tab-pane active">
                    {% for table in tables.values %}
                    <table class="table">
                        <tbody>
                        {% for row in table %}
                        <tr>
                            {% for item in row %}
                            <td>{{ item }}</td>
                            {% endfor %}
                        </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                    {% endfor %}
                </div>
            </div>
            {% endfor %}

我希望了解如何将数据存储或传递到我的上下文以获得我想要的内容，即

<div class="tab-content">
    <div id="table1" class="tab-pane active">
          <table class="table">...</table>
    </div>
    <div id="table2" class="tab-pane active">
          <table class="table">...</table>
    </div>
    <div id="table3" class="tab-pane active">
          <table class="table">...</table>
    </div>
</div>
...

对比我目前得到的:

<div class="tab-content">
    <div id="table1" class="tab-pane active">
             <table class="table">...</table>
             <table class="table">...</table>
             <table class="table">...</table>
    </div>
    <div id="table2" class="tab-pane active">
             <table class="table">...</table>
             <table class="table">...</table>
             <table class="table">...</table>
    </div>
    <div id="table3" class="tab-pane active">
             <table class="table">...</table>
             <table class="table">...</table>
             <table class="table">...</table>
    </div>
</div>
...

Answer 1

这应该有效:

<div class="tab-content">
    {% for table_name, table in tables.items %}
        <div id="{{ table_name }}" class="tab-pane {% if forloop.first %} active {% endif %}">
            <table class="table">
                <tbody>
                    {% for row in table %}
                        <tr>
                        {% for item in row %}
                            <td>{{ item }}</td>
                        {% endfor %}
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    {% endfor %}
</div>

最好在循环开始时使用 .items 来使用字典的键和值，而不是在循环逻辑中进一步获取值。它避免了循环逻辑中的困惑。

编辑:active 类应该只用于第一个选项卡。因此，您需要使用 forloop.first 模板标记在您第一次运行循环时添加类 thr。