Загрузка тегов категорий с помощью кнопки load more

я новичок в jquery, я реализовал кнопку load more на моем блоге с помощью jquery, но теги категорий не отображаются в html, когда я нажимаю на кнопку load more

Пока все работает нормально, но я не могу просто отобразить теги на почтовой карточке, она продолжает возвращать undefined
. примечание: "я получаю категории с отношением полей "многие ко многим""
введите описание изображения здесь

Вот мои взгляды: `

def home(request):
    post = BlogPost.objects.all()[0:5]
    total_post = BlogPost.objects.count()
    context = {'post': post, 'total_post':total_post}
    return render(request,'blog/home.html', context)

def load_more(request):
    # get total items currently being displayed
    total_item = int(request.GET.get('total_item'))
    # amount of additional posts to be displayed when i click on load more 
    limit = 3
    posts = list(BlogPost.objects.values()[total_item:total_item+limit])
    print(BlogPost.objects.all())
    data = {
        'posts':posts,
    }
    return JsonResponse(data=data)

вот мой шаблон:

<div class="blogpost-container">
            
            <div class="blogposts" id="blog-content">
                
            {% for post in post %}
                <div class="post">
                    <img id="img-src" src="{{post.image.url}} " image-url="{{post.image.url}}" alt="">
                    <p><strong>{{post.title}}</strong></p>
                    {% for category in post.category.all%}
                        <h3>{{category}}</h3>
                    {%endfor%}
                    
                    <a id="post-detail-link" href="{% url 'detail' post.id %}" detail-url="{% url 'detail' post.id %}"><h2>{{post.summary}}</h2></a>
                </div>
            {%endfor%}
            
            </div>
        </div>
        <div class="add-more" data-url='{% url "load_more" %}'id="add-btn">
            <button type="button" class="more-content">load more</button>
        </div>
        <div class="alert no-more-data" role="alert" id="alert">
            No more post to load!!!
        </div>
        {{total_post|json_script:"json-total"}}
       

вот мой js файл:

const loadBtn=  document.getElementById('add-btn')
const total_post = JSON.parse(document.getElementById('json-total').textContent);              
const alert = document.getElementById('alert')

function loadmorePost(){
    const content_container = document.getElementById('blog-content');
    var _current_item =$('.post').length;
    $.ajax({
            url:$('.add-more').attr('data-url'),
            type:'GET',
            data:{
                    'total_item':_current_item
            },
            
            beforeSend:function(){
                alert.classList.add('no-more-data')

            },
            success:function(response){
                    const data = response.posts
                    alert.classList.add('no-more-data')

                    
                    data.forEach(posts => {
                            const imageurl = 'media/'+posts.image
                            const detailurl = 'post/'+posts.id;
                            const category = posts.category;                           
                            content_container.innerHTML +=`<div class="post" id=${posts.id}>
                                                                    <img id="img-src" src=${imageurl} image-url="{{post.image.url}alt="">
                                                                    <p><strong>${posts.title}</strong></p>
                                                                    
                                                                    <h3>${category}</h3>
                                                                    <a  id="post-detail-link" href=${detailurl}><h2>${posts.summary}</h2></a>
                                                            </div>`
                    })

                    if (_current_item == total_post){
                       
                    alert.classList.remove('no-more-data')
                    loadBtn.classList.add('no-more-data')
                    }
                    else{ loadBtn.classList.remove('no-more-data')
                    alert.classList.add('no-more-data')
                    }

            },
            error:function(err){
                    console.log(err);

            },

    });

};
loadBtn.addEventListener('click', () => {
    loadmorePost()
});

Вернуться на верх