[Django] Comment passer des valeurs directement des balises de modèle aux variables JavaScript

Background

Lorsque vous souhaitez afficher tel quel de context_data de TemplateView vers html, vous pouvez l'afficher en définissant la balise comme suit.

views.py


from django.views.generic import TemplateView

class SampleTemplateView(TemplateView):
    def get_context_data(self, **kwargs):
        context = super().get_context_data(**kwargs)
        context['areas'] = ["japan","tokyo","osaka","nagoya","sapporo","sendai","fukuoka"]
        return context

index.html


...
    <ul>
    {% for item in areas %}
        <li> {{ item }} </li>
    {% endif %}
    </ul>
...

Est affiché.

Cependant, il y a des moments où vous souhaitez passer une valeur directement lorsque vous souhaitez dessiner à l'aide de la bibliothèque Javascript. Voici comment le faire passer.

Failure

Si vous le passez tel quel, ...

<script type="text/javascript">
    var areas = "{{ areas }}";
    console.log(areas);
</script>
[&#x27;japan&#x27;, &#x27;tokyo&#x27;, &#x27;osaka&#x27;, &#x27;nagoya&#x27;, &#x27;sapporo&#x27;, &#x27;sendai&#x27;, &#x27;fukuoka&#x27;]

Les guillemets simples, "<", ">", etc. sont automatiquement convertis. Puisqu'il s'agit d'un type de chaîne de caractères, j'ai pensé qu'il serait correct de le dicter avec JSON.parse après l'avoir remplacé par une expression régulière, mais je ne pouvais pas le faire correctement.

Ainsi, à la suite de recherches, j'ai trouvé deux méthodes.

Method 1 C'est flou, mais c'est un moyen d'appeler chaque élément et de l'écrire en code javascript.

var areas = [
{% for area in areas %}
{% with index=forloop.counter0 %}
{% if 0 < index%},{% endif %}
{% endwith %}
"{{area.name}}"
{% endfor %}
];
console.log(areas);

Method 2

L'autre consiste à désactiver le contrôle d'échappement automatique avec ʻautoescape`.

{% autoescape off %}
var areas = {{ areas }};
{% endautoescape %}
console.log(areas);

Celui-ci est plus facile.

Reference

Recommended Posts

[Django] Comment passer des valeurs directement des balises de modèle aux variables JavaScript
[Python] Comment supprimer les valeurs en double de la liste
Comment effectuer les réglages initiaux à partir de la création de projet Django
Comment effectuer un traitement arithmétique avec le modèle Django
Comment vérifier la version de Django
Comment faire fonctionner Linux depuis la console
Comment créer une application à partir du cloud à l'aide du framework Web Django
Comment compter le nombre d'éléments dans Django et sortir dans le modèle
Comment imprimer des messages de débogage sur la console Django
Comment faire fonctionner Linux depuis l'extérieur Procédure
Comment mesurer la vitesse de la ligne depuis le terminal
Comment trouver la corrélation pour les variables catégorielles
Comment passer des arguments lors de l'appel d'un script python depuis Blender sur la ligne de commande
Comment créer un article à partir de la ligne de commande
Le mur lors du passage du service Django de Python 2.7 à la série Python 3
Comment utiliser le stockage Azure Table de Django (PTVS)
Remarque DJango: depuis le début (création d'une vue à partir d'un modèle)
Comment lancer instantanément Jupyter Notebook à partir du terminal
Exécuter la fonction Python à partir de Powershell (comment passer des arguments)
Transition vers l'écran de mise à jour avec le Django a tag
Comment publier un ticket depuis l'API Shogun
[Python] Comment afficher les valeurs de liste dans l'ordre
[Django] Comment rediriger les utilisateurs non connectés vers la page de connexion
Django # 2 (modèle)
Modèle HTML Django
Organiser les fichiers de modèle Django
Django memo n ° 1 à partir de zéro
Remarque DJango: depuis le début (création d'une vue à partir d'un modèle)
Django à partir de zéro (partie: 2)
Django à partir de zéro (partie: 1)
Utiliser le modèle django de l'interpréteur
Afficher Django ManyToManyField dans un modèle
DJango Memo: Depuis le début (préparation)
[Débutant] Récupérer de la base de données Django Query
Créer un filtre avec un modèle django
[Django] Comment passer des valeurs directement des balises de modèle aux variables JavaScript
Comment définir des variables pouvant être utilisées dans toute l'application Django ~ Utile pour les modèles, etc. ~
Comment écrire une validation personnalisée dans Django REST Framework
[Django] Transmettez l'instance utilisateur authentifiée par l'API à ModelSerializer
[Django] Comment donner des valeurs d'entrée à l'avance avec ModelForm
Comment calculer la quantité de calcul appris de ABC134-D
Comment se connecter automatiquement comme 1Password depuis CLI
(Note) Comment passer le chemin de votre propre module
Comment générer une requête à l'aide de l'opérateur IN dans Django
Comment accéder à NAPALM depuis le Web (solution réelle NetDevOpsSec)
Comment utiliser des valeurs discrètes comme variables dans Scipy Optimize
DJango Memo: depuis le début (plus de modifications sur l'écran de gestion)
Transmettez les données OpenCV de la bibliothèque C ++ d'origine à Python
Rapport de (peut-être) changements de Django 2.x à Django 3.x: Comment spécifier la réécriture de balises de fichiers statiques et la redirection HttpResponse
Comment utiliser le générateur
Comment définir les variables Go
Passer du texte à Django genericview
Comment utiliser le décorateur
Comment augmenter l'axe
Comment démarrer la première projection
Comment obtenir toutes les valeurs possibles dans une expression régulière
Comment obtenir des abonnés et des abonnés de Python à l'aide de l'API Mastodon
[Python] Comment obtenir et modifier les lignes / colonnes / valeurs d'une table.
[EC2] Comment installer et télécharger chromedriver à partir de la ligne de commande
[Django] Comment lire les variables / constantes définies dans un fichier externe
Comment extraire la chaîne de caractères souhaitée à partir d'une ligne 4 commandes
Comment résoudre l'erreur survenue dans toimage (à partir de PIL.Image import fromarray as toimage)
Comment utiliser la fonction de rendu définie dans .mako (.html) directement dans mako
[Astuces] Comment étendre le modèle lors de la création de HTML avec django
Comment réparer la merde lors de la lecture d'images Google Cloud Storage de Django déployées sur GAE