Article Writing

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})

{% 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 %}

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 fucntion/method error

i am getting back an object so how can i do this

sorry a beginner in javascript