I am trying to dynamically populate a table's select dropbox, and to do that I need to loop over an array.

However, since the loop is done via jinja2 (check last line in code) and the array I am looping on is a javascript variable, it is not working.

Is there a workaround available that my research missed or is it impossible to do?

    var cardgroups = JSON.parse('{{ cardgroups | tojson | safe}}');
    var offices = JSON.parse('{{ offices | tojson | safe}}');
    const departments = JSON.parse('{{ departments | tojson | safe}}');

    const office = $('#office').val();
    let office_id = 0;
    for(let i = 0; i < offices.length; i++) {
        if (offices[i]['shortname'] == office) {
            office_id = offices[i]['id'];
            break;
        }
    }

    var office_cardgroups = []
    for(let i = 0; i < cardgroups.length; i++) {
        if (cardgroups[i]['office'] == office_id) {
            office_cardgroups.push(cardgroups[i]);
        }
    }

    const table = document.getElementById("table");
    var tr = document.createElement('tr');
       table.appendChild(tr);

    {% for department in departments %}
        var rowCount = table.rows.length;
        var row = table.insertRow(rowCount);
        row.insertCell(0).innerHTML = "{{ department.name }}";
        row.insertCell(1).innerHTML = '<td className="select"><select id="cardgroups_{{ department.id }}">{% for cardgroup in office_cardgroups %}<option value="{{ cardgroup.id }}">{{cardgroup.name}}</option>{% endfor %}</select></td>';