Рендеринг HTML из ajax/json в Django

Я пытаюсь фильтровать статьи блога по определенным тегам через ajax. После нескольких дней изучения ajax и работы над этим я пришел к следующему коду.

Я успешно получил данные, отфильтрованные по тегам, и теперь хочу отобразить их в виде html.

Я использовал цикл .each для перебора значений в app.js, и пытался вставить html в заголовок id trial в all-articles.html.

Я получаю синтаксическую ошибку в консоли. Синтаксическая ошибка возникает в данных json? Вот скриншот ошибки. Любая помощь будет принята с благодарностью! Спасибо enter image description here

all-articles.html

{% for article in page_obj %}
    <article>
      <header id="trial>
        <h4>{{ article.title }}</h4>
      </header>
    </article>
{% endfor %}

app.js

$(document).ready(function () {
  $(".tag-nav-links").on("click", function (e) {
    e.stopPropagation();
    return $.ajax({
      type: "POST",
      url: "",
      data: { filter: `${e.target.textContent}` },
      success: function (json) {
        var html = "";
        $(json).each(function (index, value) {
          html += "<h4>{{" + value.title + "}}</h4>";
        });
        $("#trial").append(html);
      },
    });
  });
});

views.py

@csrf_exempt
def allarticles(request):
    articles_list = Articles.objects.all()
    paginator = Paginator(articles_list, 12)

    page_number = request.GET.get('page')
    page_obj = paginator.get_page(page_number)

    all_tags = Tags.objects.all()

    if request.is_ajax():
        tag_assign = request.POST['filter']
        tag = Tags.objects.get(tag=tag_assign)
        data = serializers.serialize('json', Articles.objects.filter(articletags__tag=tag))
        return JsonResponse(data, safe=False)

    context = {'page_obj': page_obj, 'all_tags': all_tags}
    return render(request, "All-articles.html", context)

Добавьте dataType: "json" к вашему ajax-запросу, чтобы он автоматически разбирал ответ как json. Если вы не добавите его, ответ будет просто строкой. Как вы делаете это сейчас, вы на самом деле не разбираете ответ.

return $.ajax({
  type: "POST",
  url: "",
  dataType: "json", // this
  data: { filter: `${e.target.textContent}` },
  success: function (json) {
    var html = "";
    $(json).each(function (index, value) {
      html += "<h4>{{" + value.title + "}}</h4>";
    });
    $("#trial").append(html);
  },
});
Вернуться на верх