I am having trouble with java script filter functions, I am doing a app and on the vet page I have about 4 vets, that are either a specialist or general vet. They also have a specialty of cat, dog etc, so I have buttons that I want to click and filter only the vets that are e.g. general or specialist etc I am having trouble getting the function to work, and when I view and click the button it does nothing when it should show only the vets after pressing a particular button e.g. General Vet or Specialist
class VetsView {
init() {
document.title = 'Vets'
this.vets = null
this.render()
Utils.pageIntroAnim()
this.getVets()
}
// ------filter--------------------------------------------------------
async filterVets(field, match) {
if (!field || !match) return
// validate
// get fresh vets
this.vets = await VetAPI.getVets()
// set variable
let filteredVets
// service-------------------------------------------------------
if (field == 'service') {
const service = ['Specialtist', 'General Vet'];
filteredVets = this.vets.filter(vet => vet.service == match)
this.vets = filteredVets
this.render()
}
// }
// specialty ----------------------------------------------------
if (field == 'specialty') {
filteredVets = this.vets.filter(vet => vet.specialty == match)
this.vets = filteredVets
this.render()
}
}
// get vets
async getVets() {
try {
this.vets = await VetAPI.getVets()
console.log(this.vets)
this.render()
} catch (err) {
Toast.show(err, 'error')
}
}
// clear filter btns
clearFilterBtns() {
const filterBtns = document.querySelectorAll('.filter-btn')
filterBtn.forEach(btn => removeAttribute("type"))
}
// handler button
handleFilterBtn(e) {
console.log(e.target)
// clear btns
this.clearFilterBtn()
// set button active
e.target.setAttribute("type", "primary")
const field = e.target.getAttribute("data-field")
const match = e.target.getAttribute("data-match")
// extract field and match from buttoms
console.log("field = ", field)
console.log("match = ", match)
// filter vets
this.filterVets(field, match)
}
render() {
const template = html `
<div class="filter-menu">
<div>
Filter by
</div>
<div>
<strong>Service</strong>
</div>
<div>
<sl-button class="filter-btn" size="small" data-field="service" data-match="generalvet" @click=${this.handleFilterBtn.bind(this)}>General Vet</sl-button></sl-button>
<sl-button class="filter-btn" size="small" data-field="service" data-match="specialist" @click=${this.handleFilterBtn.bind(this)}>Specialist</sl-button></sl-button>
</div>
<div>
<strong>Pet</strong>
</div>
<div>
<sl-button class="filter-btn" size="small" data-field="specialty" data-match="cat" @click=${this.handleFilterBtn.bind(this)}>Cat</sl-button>
<sl-button class="filter-btn" size="small" data-field="specialty" data-match="dog" @click=${this.handleFilterBtn.bind(this)}>Dog</sl-button>
<sl-button class="filter-btn" size="small" data-field="specialty" data-match="rabbit" @click=${this.handleFilterBtn.bind(this)}>Rabbit</sl-button>
<sl-button class="filter-btn" size="small" data-field="specialty" data-match="bird" @click=${this.handleFilterBtn.bind(this)}>Bird</sl-button>
<sl-button class="filter-btn" size="small" data-field="specialty" data-match="mouse" @click=${this.handleFilterBtn.bind(this)}>Mouse</sl-button>
<sl-button class="filter-btn" size="small" data-field="specialty" data-match="reptile" @click=${this.handleFilterBtn.bind(this)}>Reptiles</sl-button>
</div>