Jquery перебирает данные фляги, переданные в шаблон

Question

Я хочу использовать jquery для итерации по результатам запроса колб в базе данных, передаваемых шаблону через render_template, и добавлять данные в таблицу html, строка за строкой.Я не могу понять правильную команду jquery, чтобы она работала!Когда я запускаю код, он не выдает никаких ошибок, он просто отображает пустую таблицу.В таблице базы данных есть 2 записи.

модель дБ:

class Cust(db.Model):
    __tablename__ = 'custs'
    id = db.Column(db.Integer, primary_key=True)
    name = db.Column(db.String(50), index=True, nullable=False)
    age = db.Column(db.Integer, nullable=False)

вид колбы:

@home.route('/')
def homepage():
    custs = Cust.query.all()
    return render_template('home/index.html', title="Home", custs=custs)

шаблон:

<div class="container-fluid">
  <table class="table" id="table1">
    <thead>
      <tr>
        <th>Name</th>
        <th>Age</th>
      </tr>  
    </thead>
    <tbody>
      <tr></tr>
    </tbody>
  </table>
</div>

<script type="text/javascript">

  $(function() {
    var i = 0;
    while (i < '{{ custs|length }}') {
        var name = custs[i].name;
        var age = custs[i].age;
        $('#table1 > tbody:last-child').append('<tr><td>' + name + '</td><td>' + age + '</td></tr>');
        i++;
    } 
});

</script>

Но если я запускаю свой скрипт как:

$(function() {
            var name = custs[0].name;
            var age = custs[0].age;
            $('#table1 > tbody:last-child').append('<tr><td>' + name + '</td><td>' + age + '</td></tr>');
    });

Моя таблица заполнится первой записью!

Хорошо, для всех, кто может столкнуться с этой проблемой, вот как я это сделал!

$(function() {
    {% for c in custs %}
        var name = '{{ c.name }}';
        var age = '{{ c.age }}';
        $('#table1 > tbody').append('<tr><td>' + name + '</td><td>' + age + '</td></tr>');
    {% endfor %}
});

Теперь он перебирает переменную запроса и корректно загружает данные в таблицу.

Спасибо @Kata Csortos, что ответили, это сработало!

Answer 1

Как насчет итерации по наборам, как это:

<script type="text/javascript">

  $(function() {
    for (const cust of custs) {
        const name = cust.name;
        const age = cust.age;
        $('#table1 > tbody:last-child').append('<tr><td>' + name + '</td><td>' + age + '</td></tr>');
    } 
});

</script>

Или передать длину кусков как переменную в jinja и итерировать через элементы набросков с помощью цикла for.