Click here to Skip to main content
14,970,330 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
Hi so I am using python Django and using JavaScript with the help of fetch method but I am stuck can anyone please help :(

What I have tried:

My python views file:
Python
def Data(request):
	items = Post.objects.all()

	data = []

	for qs in items:

		I = {"title":qs.title,
			 "content": qs.content,
			 "image": qs.image.url,
			}
		data.append(I)

	return JsonResponse({"data":data})

My Search_results HTML file:
HTML
{% extends 'blog/base.html' %}

{% load static %}

{% block content %}

<div class = 'w-100 text-center'>

<h1>Search Results</h1>


<form id = "search-form" autocomplete="off">
	{% csrf_token %}
  <input name = 'game' type="text" id = "search-input" placeholder= "Post Search..">
</form>

<div id = "results-box" class = "results-card"> 
</div> 

</div>


	


{% endblock content %}


{% block js %}


<script defer src="{% static 'blog/S1.js' %}"> </script>


{% endblock js %}

My JS file:
JavaScript
console.log('Heelowwww')

const url = window.location.href
const searchForm = document.getElementById("search-form")
const searchInput = document.getElementById("search-input")
const resultsBox = document.getElementById("results-box")
const csrf = document.getElementsByName("csrfmiddlewaretoken")[0].value

options = {method: "GET",
		   headers: {
		   	Accept: "application/json"
		   },
		   data:{
		   	'csrfmiddlewaretoken': csrf,
			// 'game':searchInput,
		   }
}

const SearchPosts = async SearchIt => {
const res = await fetch("http://localhost:8000/data/",options)
const Posts = await res.json()

S = Posts["data"]

let matches = S.filter(post =>{
const regex = new RegExp(`^${SearchIt}`, 'gi')
return post.match(regex)
})
 	console.log(matches)

}

searchInput.addEventListener('input', () => SearchPosts(searchInput.value))

I get Filter is not a function/method error

I am getting back an object so how can I do this :(

sorry a beginner in javascript
Posted
Updated 26-May-21 21:58pm
v2

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900