How to pass data from django to js from html template

Question

I have following files as mentioned below and I want to know how can I pass the django username to js in the index.html file

view.py file

from django.shortcuts import render
from django.contrib.auth.decorators import login_required

from .models import Message
import json

def index(request):
    return render(request, 'chat/index.html')
@login_required
def room(request, room_name):
    messages = Message.objects.filter(room=room_name)[0:25]

    return render(request, 'chat/room.html', {'room_name': room_name,
     'username': json.dumps(request.user.username),'messages': messages})

models.py file

from django.db import models
from django.contrib.auth import get_user_model


User = get_user_model()

class Message(models.Model):
    username = models.CharField(max_length=50)
    room = models.CharField(max_length=255)
    content = models.TextField()
    date_added = models.DateTimeField(auto_now_add=True)

    class Meta:
        ordering = ('date_added',)

    def __str__(self):
        return self.username

script in index.html

user_8770336 · Answer

var userName = JSON.parse( `{{ username|safe }}` ); // add quotes

user_15978450 · Answer

Try using quotation to wrap the Django variable in the js. For example:

var userName = JSON.parse("{{ username|safe }}");

user_16145311 · Answer

I solved this by using from django.utils.safestring import mark_safe with the json.dumps in the views.py file

from django.shortcuts import render
from django.utils.safestring import mark_safe
from django.contrib.auth.decorators import login_required
from django.contrib.auth import get_user_model
from .models import Message
import json

User = get_user_model()
def index(request):
    username = mark_safe(json.dumps(request.user.get_username()))
    return render(request, 'chat/index.html',{'username':username})


@login_required
def room(request, room_name):

    messages = Message.objects.filter(room=room_name)[0:25]

    return render(request, 'chat/room.html', {'room_name': room_name,
     'username': mark_safe(json.dumps(request.user.get_username())),'messages': messages})

index.html

How to pass data from django to js from html template

3 Answers