Comment passer une liste de Python, par Jinja2 à JavaScript

Question

Disons que j'ai une variable Python :

list_of_items = ['1','2','3','4','5']

et je le passe à Jinja en rendant le HTML, et j'ai aussi une fonction en JavaScript appelée somefunction(variable) . J'essaie de faire passer chaque élément de list_of_items . J'ai essayé quelque chose comme ça :

{% for item in list_of_items %}
<span onclick="somefunction({{item}})">{{item}}</span><br>
{% endfor %}

Est-il possible de passer une liste de Python à JavaScript ou dois-je passer chaque élément de la liste un par un dans une boucle ? Comment puis-je faire cela ?

Answer 1

Vous pouvez le faire

<tbody>
    {% for proxy in proxys %}
            <tr>
                <td id={{proxy.ip}}>{{proxy.ip}}</td>
                <td id={{proxy.port}}>{{proxy.port}}</td>
                <td>{{proxy.protocol}}</td>
                <td>{{proxy.speed}}</td>
                <td>{{proxy.type}}</td>
                <td>{{proxy.city}}</td>
                <td>{{proxy.verify_time}}</td>
                <td>
                    <button type="button" class="btn btn-default" aria-label="Left Align">
                        <span class="glyphicon glyphicon-paste" aria-hidden="true" onclick="copyProxy('{{proxy.ip}}', '{{proxy.port}}')"></span>
                    </button>
                </td>
            </tr>
        {% endfor %}
    </tbody>
</table>

Answer 2

Faites des balises HTML invisibles comme <label>, <p>, <input> etc. et de nommer son id, et le nom de la classe est un motif pour que vous puissiez la retrouver plus tard.

Disons que vous avez deux listes maintenance_next[] et maintenance_block_time[] de la même longueur, et vous voulez passer les données de ces deux listes à javascript en utilisant le flask. Vous prenez donc une étiquette invisible et définissez son nom d'étiquette comme un motif de l'index de la liste et définissez son nom de classe comme valeur à l'index.

{% for i in range(maintenance_next|length): %}
<label id="maintenance_next_{{i}}" name="{{maintenance_next[i]}}" style="display: none;"></label>
<label id="maintenance_block_time_{{i}}" name="{{maintenance_block_time[i]}}" style="display: none;"></label>
{% endfor%}

Maintenant, vous pouvez récupérer les données en javascript en utilisant une opération javascript comme ci-dessous.

<script>
var total_len = {{ total_len }};

for (var i = 0; i < total_len; i++) {
    var tm1 = document.getElementById("maintenance_next_" + i).getAttribute("name");
    var tm2 = document.getElementById("maintenance_block_time_" + i).getAttribute("name");

    //Do what you need to do with tm1 and tm2.

    console.log(tm1);
    console.log(tm2);
}
</script>