When I changed the import method I got an error on a live search.
This is the JQUERY code I'm using. The error I'm gettin is the blogpost['title'] is empty. I've read that it might be due to the name blogpost being the overall container, so it's not actually a single blogpost but all the blogpost, but I don't know how to fix this. I think the most helpful would be someone taking a look at the rdata and the json error. Thanks!
<script>
var data = '{{qs_json}}'
data = data.replace(/"/g, '"');
data = data.replace(/(?:\r\n|\r|\n)/g, '');
console.log(data)
rdata = JSON.parse(data)
console.log(rdata)
const input = document.getElementById('search_form')
let filteredArr = []
input.addEventListener('keyup', (e) => {
jsbox.innerHTML = ""
filteredArr = rdata.filter(blogpost => blogpost['title'].toLowerCase().includes(e.target.value.toLowerCase()))
if (filteredArr.length > 0) {
filteredArr.map(blogpost => {
jsbox.innerHTML += `
<div class="col mt-5 ml-1">
<a href="blog/${blogpost.slug}" style="text-decoration: none">
<div class= "card">
<div class='blogpost_image_container'>
<img src="${blogpost.image}" class="card-img-top" alt="blogpost image">
</div>
<div class="card-body">
<h5 class="card-title">${blogpost.title} </h5>
<p class="card-text"> ${blogpost.subtitle} </p>
<span id="category_badge" class="badge rounded-pill bg-warning text-dark"> ${blogpost.category}
</div>
</div>
</div >
</a> `
})
}
else {
jsbox.innerHTML = `<div class= "col mt-5 ml-1"> <h5 class="card-title"> No Matches Found! </h5></div >`
}
})
</script>However the console logged Rdata shows something different: The Console logged rdata
This is my django view import:
class BlogListView(ListView):
model = BlogPost
template_name = "blog/blog.html"
def get_context_data(self, **kwargs):
context = super().get_context_data(**kwargs)
if self.request.GET.get('category_filter'):
cat_filter = self.request.GET.get('category_filter')
all_blogposts = BlogPost.objects.filter(
category=cat_filter)
print(all_blogposts)
else:
all_blogposts = BlogPost.objects.all()
data = serializers.serialize("json", all_blogposts)
context["qs_json"] = data
context["blogposts"] = all_blogposts
context["categories"] = Category.objects.all()
return context
And this is the forloop in the django template, not sure if it's useful.
<div class="row row-cols-1 row-cols-md-2 g-4" id="jsbox">
{% for blogpost in blogposts %}
<div class="col mt-5 ml-1">
<div class="card">
<a href="{% url 'blogpost' blogpost.slug %}">
<div class='blogpost_image_container'>
<img src="{{ blogpost.image }}" class="card-img-top" alt="blogpost image">
</div>
<div class="card-body">
<h5 class="card-title">{{ blogpost.title }} </h5>
<p class="card-text"> {{ blogpost.subtitle}} </p>
<span id="category_badge" class="badge rounded-pill bg-warning text-dark">
{{ blogpost.category }}</span>
</div>
</a>
</div>
</div>
{% endfor %}
</div>
{% endblock %}