Использование фильтра Django внутри Javascript

Я новичок в django, я застрял на использовании фильтра Django внутри javascript. Я пытался реализовать Load More data с помощью ajax. Все работает хорошо, но я не могу добавить новые данные в html контейнер. В моем домашнем представлении, которое расширяется до base.html, у меня есть следующий html-контент-

{% block content %}

{% for post in posts %}

<article class="media card border-secondary" style="margin: 1rem 0;">
  <div class="card-body media-body">
    <h5 class="card-title">{{post.post_title}}</h5>
    <h6 id="reading-time" class="card-subtitle mb-2 text-muted">{{post.post_content | readtime }}</h6>
    <p class="card-text">{{post.post_content | truncatewords:50 |markdown|striptags }}</p>
    <!--  | safe    -->
    <a href="{% url 'article-page' post.post_id post.post_title|slugify %}" class="stretched-link">Continue
      Reading</a>

  </div>

</article>

{% endfor %}

<button type="button" id="loadmorebtn" class="btn btn-outline-primary mx-auto d-block btn-lg">Load More</button>

{% endblock content %}

Я использую несколько встроенных фильтров django и один пользовательский фильтр. При нажатии на кнопку Load More у меня есть некоторый ajax-код, который работает нормально и возвращает данные-

<script type="text/javascript">



  $(document).ready(function () {
    var offset = 5
    const loadBtn = $('#loadmorebtn');

    loadBtn.click(function (e) {
      e.stopImmediatePropagation();
      $(this).prop('disabled', true);       // Disable the button
      $(this).html('<span class="spinner-grow spinner-grow-lg align-middle" role="status" aria-hidden="true"></span>   Loading...');           // Change button text

      $.ajax({
        url: "{% url  'load-more-posts' %}",
        type: "GET",
        data: { 'offset': offset },
        dataType: 'JSON',
        success: function (data) {
          if (data.status == 1) {
            offset += data.posts.length;
            loadBtn.prop('disabled', false); // Re-enable the button
            loadBtn.text('Load More');

            data.posts.forEach(el => {
              $('#container').append(

                <article class="media card border-secondary" style="margin: 1rem 0;">
                  <div class="card-body media-body">
                    <h5 class="card-title">{{ el.title }}</h5>
                    <h6 id="reading-time" class="card-subtitle mb-2 text-muted">{{ post.post_content | readtime }}</h6>
                    <p class="card-text">{{ post.post_content | truncatewords:50 |markdown|striptags }}</p>
    <!--  | safe    -->
                    <a href="{% url 'article-page' post.post_id post.post_title|slugify %}" class="stretched-link">Continue
                      Reading</a>

                  </div>

                </article>
              )
            });
          }
        }
      })
    });
  })

Но, моя проблема в том, как я могу обработать эти данные, если просто добавить {{${el.content} | readtime. то выкидывает ошибку. Есть ли способ решить эту проблему, чтобы я мог использовать django filer

Или я должен оставить этот ajax и перейти к пагинации, где больше данных загружается на 2-й странице. Или я должен создать функцию javascript для каждого фильтра django, чтобы использовать.

Я использую Django версии 5.0.2

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