I am trying to filter blog articles by certain tags via ajax. After days of learning ajax and working on this, I have come up with the below code.

I have successfully got the data filtered by tag and now want to display it as HTML.

I've used the .each loop to iterate through the values in app.js and trying to insert the HTML into the header id trial in all-articles.html.

I am getting a syntax error in the console. The syntax error is on the JSON? data. Here is the screenshot of the error. Any help is appreciated! Thank you

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)