循环遍历 JSON、List、List 到 Accordion Bootstrap

Question

What It Looks Like Now(Image)

如果在每个季节下附加剧集，我会想要什么。剧集列表中有 7 个列表，总共 7 个季节，现在整个剧集列表正在打印到每个季节（可以在提供的图片中看到），但我希望每个列表中的每个列表都在每个季节。现在每个季节有两集，所以我希望每个季节下有两集，而不是每个季节下的所有剧集。这是使用 Bootstrap 手风琴完成的。谢谢

<div id="accordion" role="tablist">
  {% for season in tvdata[currentSeries]["seasons"] %}
    <div class="card">
      <div class="card-header" role="tab" id="heading">
        <h5 class="mb-0">
          <a data-toggle="collapse" href="#collapse" role="button" aria-expanded="false" aria-controls="collapse">
            <p>Season {{ season }}</p>
          </a>
        </h5>
      </div>

      {% for season in tvdata[currentSeries]["episodes"] %}
        {% for items in season %}
          <div id="collapse" class="collapse show" role="tabpanel" aria-labelledby="heading" data-parent="#accordion">
            <div class="card-body">
                {{ items }}
            </div>
          </div>
        {% endfor %}
      {% endfor %}
    </div>
  {% endfor %}
</div>

JSON 文件：

"seasons": [1, 2, 3, 4, 5, 6, 7],
"episodes": [ ["S1-ep1","S1-ep2"],
              ["S2-ep1","S2-ep2"],
              ["S3-ep1","S3-ep2"],
              ["S4-ep1","S4-ep2"],
              ["S5-ep1","S5-ep2"],
              ["S6-ep1","S6-ep2"],
              ["S7-ep1","S7-ep2"]]

          }

问题已修复（感谢下方）：

          <div id="collapse" class="collapse show" role="tabpanel" aria-labelledby="heading" data-parent="#accordion">
            <div class="card-body">
              {% for seasoneps in tvdata[currentSeries]["episodes"][season-1] %}
                {% for eps in seasoneps %}
                {{ eps }}
                {% endfor %}
              {% endfor %}
            </div>
          </div>

Answer 1

我没有使用 jinja - 但使用了一些淘汰赛模板以及查看 mustache 和 asp.net razor 视图 - 你的感觉 对我来说：

• 您使用两个具有相同变量 seasons 的 for 循环，其中内部的一个覆盖外部的值 - 只是猜测。

请尝试：

<div id="accordion" role="tablist">
    {% for season in tvdata[currentSeries]["seasons"] %}
        <div class="card">
            <div class="card-header" role="tab" id="heading">
                <h5 class="mb-0">
                    <a data-toggle="collapse" href="#collapse" role="button" aria-expanded="false" aria-controls="collapse">
                        <p>Season {{ season }}</p>
                    </a>
                </h5>
            </div>

            {% for items in tvdata[currentSeries]["episodes"][season-1] %} 
                <div id="collapse" class="collapse show" role="tabpanel" aria-labelledby="heading" data-parent="#accordion">
                    <div class="card-body">
                        {{ items }}
                    </div>
                </div> 
            {% endfor %}
        </div>
    {% endfor %}
</div>

我不确定 [season-1] - 部分 - 可能是您需要使用 [{{season}}-1] 或任何语法让您选择特定于该季节的 json 部分（2 项内部列表）