Anytime I try putting an input into the search bar it returns the data.filter is not a function error. been stuck on this for a few days and I am probably just unaware of some basic rule lol
Here is my JS, JSON and HTML for the searchbar function
const searchBar = document.getElementById('myInput') let data = []; console.log(searchBar) searchBar.addEventListener('keyup', e => { const searchTarg = e.target.value.toLowerCase(); const searchFilter = data.filter(info => { return ( info.fields.toLowerCase().includes(searchTarg) || info.title.toLowerCase().includes(searchTarg) ) }) displayProducts(searchFilter) }); { "items": [ { "sys": { "id": "1" }, "fields": { "title": "queen panel bed", "price": 10.99, "image": { "fields": { "file": { "url": "./images/product-1.jpeg" } } } } }, { "sys": { "id": "2" }, "fields": { "title": "king panel bed", "price": 12.99, "image": { "fields": { "file": { "url": "./images/product-2.jpeg" } } } } }, { "sys": { "id": "3" }, "fields": { "title": "single panel bed", "price": 12.99, "image": { "fields": { "file": { "url": "./images/product-3.jpeg" } } } } } } <input type="text" id="myInput" onkeyup="navSearch()" placeholder="Search for names.."> <ul id="myUL"> <li><a href="#">Adele</a></li> <li><a href="#">Agnes</a></li> <li><a href="#">Billy</a></li> <li><a href="#">Bob</a></li> <li><a href="#">Calvin</a></li> <li><a href="#">Christina</a></li> <li><a href="#">Cindy</a></li> </ul> I did this based off many tutorials and can link the one I watched for the searchbar but idk if that is against any rules here, thanks for reading ^^
https://stackoverflow.com/questions/66684165/keep-getting-uncaught-typeerror-data-filter-is-not-a-function-on-my-search-bar March 18, 2021 at 11:04AM
没有评论:
发表评论