如何在Jinja中遍历HTML列表？Flask渲染无内容问题求助

你的问题核心是混淆了服务器端Jinja渲染和前端JS变量的作用时机：

1. Jinja的{% for %}循环是在服务器渲染页面时执行的，它只能读取Flask视图函数传给模板的服务器端变量，和前端JS里的CleverHubs变量完全无关。
2. 控制台能打印出[0]，说明Flask确实把amountOfCleverHubs数组传给了模板，但Jinja循环用的变量名是CleverHubs，和服务器端传的变量名不匹配，导致循环根本没执行，自然看不到内容。

具体修复步骤 #

方案一：统一变量名（静态渲染场景） #

• 要么调整Flask视图函数，把服务器端数组以CleverHubs为名传给模板：

  from flask import render_template
  
  def your_route():
      amountOfCleverHubs = [0]  # 你的数组数据
      return render_template('your_template.html', CleverHubs=amountOfCleverHubs)
  

• 要么直接修改Jinja循环的变量名，匹配服务器端传的amountOfCleverHubs：

  {% for CleverHub in amountOfCleverHubs %}
  <div class="card border-dark mb-3" style="width: 18rem;">
      <div class="card-body">
          <div class="card-header">
              <h4>{{ CleverHub }}</h4>
          </div>
      </div>
  </div>
  {% endfor %}
  

方案二：动态更新内容（添加设备无需刷新页面） #

如果需要添加设备后实时更新页面，仅靠Jinja的服务器端循环不够，得结合JS操作DOM：

1. 先用Jinja渲染初始设备卡片：

   <div class="container mt-4">
       <div class="col d-flex justify-content-center">
           <div class="card-deck" id="cardDeck">
               {% for hub in amountOfCleverHubs %}
               <div class="card border-dark mb-3" style="width: 18rem;">
                   <div class="card-body">
                       <div class="card-header">
                           <h4>{{ hub }}</h4>
                       </div>
                   </div>
               </div>
               {% endfor %}
           </div>
       </div>
   </div>
   

2. 添加新设备时，用JS创建新卡片并插入到页面：

   function addNewHub() {
       const cardDeck = document.getElementById('cardDeck');
       const newCard = document.createElement('div');
       newCard.className = 'card border-dark mb-3';
       newCard.style.width = '18rem';
       newCard.innerHTML = `
           <div class="card-body">
               <div class="card-header">
                   <h4>0</h4> <!-- 替换为新设备的实际标识 -->
               </div>
           </div>
       `;
       cardDeck.appendChild(newCard);
       // 同步更新JS数组
       CleverHubs.push(0);
   }
   

内容的提问来源于stack exchange，提问作者Pixelcade