Estoy tratando de llenar dinámicamente el cuadro desplegable de select de una tabla, y para hacerlo necesito recorrer una matriz.

Sin embargo, dado que el ciclo se realiza a través jinja2 (verifique la última línea en el código) y la matriz en la que estoy realizando el ciclo es una variable de javascript , no funciona.

¿Hay una solución alternativa disponible que mi investigación omitió o es imposible de hacer?

 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>';