Как передать локальную переменную функции в представлениях Django в javascript fetch API?

Я совсем новичок в javascript. Я делаю кнопку like, которая будет увеличивать количество лайков поста асинхронно без перезагрузки всей страницы. Ниже приведена моя функция Django views.

views.py

@login_required
def likepost(request,id):
    post = NewPost.objects.get(id = id)
    is_like = False
    for like in post.likepost.all():
        if like == request.user and request.method == "POST":
            is_like = True
            break
    
    if not is_like:
        post.likepost.add(request.user)
    
    else:
        post.likepost.remove(request.user)
    
    return JsonResponse({
        "id" : id,
        "is_like" : is_like,
        "num_like" : post.likepost.count()
    })

Здесь id - первичный ключ модели NewPost. Мой javascript будет получать API, используя эту переменную id. Вот моя js-функция.

document.addEventListener("DOMContentLoaded",function(){
    document.querySelector('#like').addEventListener('click', ()=> like_function());
})


function like_function(){
    fetch(`index/${id}/like`)
    .then(response => response.json())
    .then(result => {
        if(result.is_like){
            document.querySelector('#like').innerHTML = "Like";
        }
        else{
            document.querySelector('#like').innerHTML = "Unlike";
        }
    })
}
<button onclick="like_function()" id = "like" class="btn btn-link"><i class="fa fa-heart"></i> </button>
    <small id="num_of_likes">{{ posts.likepost.all.count }}</small>
    {% block script %} 
        <script src="{% static 'network/controller.js' %}"></script>
    {% endblock %}
    <button class="btn btn-link" style="text-decoration: none;">Comment</button>
    <a href="{% url 'postpage' id=posts.id %}" class="btn btn-link" style="text-decoration: none;">View Post</a>

Здесь я поделился своей функцией javascript, а также HTML-шаблоном. Если я нажимаю кнопку "Мне нравится", появляется следующее сообщение. enter image description here

Что мне теперь делать?

Вам необходимо добавить первичный ключ элемента в вызове like_function:

<button onclick="like_function({{ posts.pk }})" id = "like" class="btn btn-link"><i class="fa fa-heart"></i> </button>

тогда вы определяете like_function как:

function like_function(id) {
    fetch(`index/${id}/like`)
    .then(response => response.json())
    .then(result => {
        if(result.is_like){
            document.querySelector('#like').innerHTML = "Like";
        }
        else{
            document.querySelector('#like').innerHTML = "Unlike";
        }
    })
}
Вернуться на верх