How use Json variable in Django Template Tags?

Question

How use json variable in Django template tags in srcipts? I cannot use variables in javascript strings when I use django template tags and my own custom tags like: {% if ${comment}|comment_like_ip:ip %}

$(document).ready(function(){

    const comments = document.getElementById('comments')
    const loadBtn = document.getElementById('load-btn')
    const loadBox = document.getElementById('loadBox')
    let visible = 3

    vis = {
        num : visible,
    }

    let handleGetData = () => {
        $.ajax({
            type: 'GET',
            data: vis,
            url: "{% url 'load-comments' video.slug %}",
            success: function(response) {
                max_size = response.max
                const data = response.data
                console.log(data)
                data.map(comment=>{
                    console.log(comment.id)
                    if(comment.is_child) {
                        comments.innerHTML += `<div class="comment">
                                                ${comment.nickname} | ${comment.timestamp}
                                                <div style="background-color: black; width: 300px;">
                                                    <p>Ответ: ${comment.parent_name}</p>
                                                    <p>Комментарий: "${comment.parent_text}"</p>
                                                </div>
                                                <p>${comment.text}</p>
                                                <p><a href="#" class="like-comment" data-id="${comment.id}">
                                                    {% if ${comment}|comment_like_ip:ip %}
                                                    <i class="fas fa-heart" style="color: #BE0E61;"></i>
                                                    {% else %}
                                                    <i class="far fa-heart"></i>
                                                    {% endif %}
                                                    <span>${comment.likes}</span></a></p>
                                                <button style="background-color: black;" class="reply" data-id="${comment.id}" data-parent=${comment.get_parent}>Ответить</button>
                                                <form action="" method="POST" class="comment-form" id="form-${comment.id}" style="display:none;">
                                                    <textarea type="text" name="comment-text">
                                                    </textarea>
                                                    <br>
                                                    <input type="submit" class="btn submit-reply" data-id="${comment.id}" data-submit-reply="${comment.get_parent}" value="Отправить"/>
                                                </form>
                                            </div>`
                    } else {
                        comments.innerHTML += `<div class="comment">
                                                ${comment.nickname} | ${comment.timestamp}
                                                <p>${comment.text}</p>
                                                <p><a href="#" class="like-comment" data-id="${comment.id}">
                                                    {% if True %}
                                                    <i class="fas fa-heart" style="color: #BE0E61;"></i>
                                                    {% else %}
                                                    <i class="far fa-heart"></i>
                                                    {% endif %}
                                                    <span>${comment.likes}</span></a></p>
                                                <button style="background-color: black;" class="reply" data-id="${comment.id}" data-parent=${comment.get_parent}>Ответить</button>
                                                <form action="" method="POST" class="comment-form" id="form-${comment.id}" style="display:none;">
                                                    <textarea type="text" name="comment-text">
                                                    </textarea>
                                                    <br>
                                                    <input type="submit" class="btn submit-reply" data-id="${comment.id}" data-submit-reply="${comment.get_parent}" value="Отправить"/>
                                                </form>
                                            </div>`
                    }
                       
                }) 
                if(max_size) {
                    console.log('Done')
                }
            },
            error: function(error){
                console.log(error)
            }
        })
    }

    handleGetData()
    loadBtn.addEventListener('click', ()=>{
        visible += 3
        vis = {
            num : visible,
        }
        handleGetData()
    })
})

Error: Could not parse some characters: |${comment}||comment_like_ip:ip

My Custom Template Tag:

@register.filter
def comment_like_ip(value, arg):
    if CommentLike.objects.filter(ip__ip=arg).filter(comment__id=value).exists():
        return True
    else:
        return False

Answer 1

You need to make that a string for the templating engine:

{% if '${comment}'|comment_like_ip:ip %}

EDIT: I thought you were trying to generate JavaScript-code with this. You need to understand, that django-templates and js are totally independent layers.

JS is on the client side.

Django is on the server side.

When you set a variable in JS, like in your example above, that happens...

• way after django's template rendering is done.
• on the user's computer, in their browser, not on your server.

I would implement that filter as a js-function and have it run on the client-side. If you really need the server to do that calculation, you can create an API for that on the server and call that API from js using fetch, or you can do the calculation beforehand and save it's result as an attribute of the comment-object.