Я пишу функцию с целью отфильтровать некоторые результаты из базы данных. Вот проблема, которую я не могу понять:
Я не могу очистить результаты фильтра в массиве. То есть массив с результатами фильтра включает смежные значения фильтра поверх предыдущих значений фильтра (см. Скриншот ниже), даже когда я очищаю массив при каждом повторении функции.
Это код:
//Filter
const dataSet = [];
const filters = {
Locatie: [],
Doelgroep: []
}
filterValues = []
const alleLocatieG = [];
const alleDoelgroepG = [];
// Coaches uitlezen
db.collection("Vitaminders").where("Usertype", "==", "Coach")
.get()
.then(function(querySnapshot) {
querySnapshot.forEach(function(doc) {
const alleLocatie = doc.data().City
alleLocatieG.push(alleLocatie);
const alleDoelgroep = doc.data().Targetgroup
alleDoelgroepG.push(alleDoelgroep)
const data = doc.data()
dataSet.push(data)
})
})
// Filter knop
const button = document.getElementById("filter-button")
button.addEventListener("click", () => {
filtersValue.length = 0
const coachDOM = document.getElementsByClassName("nieuweD")
const coachDOMarray = Array.from(coachDOM)
coachDOMarray.forEach(C => {
C.style.display = "flex"
})
//Filters uitlezen
const inputDoelgroep = document.getElementById("filterDoelgroep")
const inputOptiesDD = inputDoelgroep.options;
let DDselect = inputOptiesDD[inputOptiesDD.selectedIndex].value;
const inputLocatie = document.getElementById("filterLocatie")
const inputOptiesLC = inputLocatie.options;
let LCselect = inputOptiesLC[inputOptiesLC.selectedIndex].value;
// Alle opties uit filter vervangen voor alle opties uit database
if (DDselect == "Alle doelgroepen"){
DDselect = alleDoelgroepG
}
if(LCselect == "Alle locaties")
LCselect = alleLocatieG
filters.Locatie.push(LCselect)
filters.Doelgroep.push(DDselect)
// Filteren
const filtersValue = Object.values(filters)
filtersValue.forEach(filter => {
filter.forEach(filt => {
if (typeof filt === 'object'){
filt.forEach(fil => {
const fi = String(fil)
filterValues.push(fi)
})
} else {
filterValues.push(filt)
}
})
})
console.log(filterValues)
dataSet.forEach(data =>{
if(!filterValues.includes(data.Targetgroup, data.City)){
const filterCoach = data.Gebruikersnaam
db.collection("Vitaminders").where("Gebruikersnaam", "==", filterCoach)
.get().then(querySnapshot => {
querySnapshot.forEach(doc => {
const username = doc.data().Gebruikersnaam
coachDOMarray.forEach(CD => {
const coachData = CD.dataset.name
if(coachData == username){
console.log("iets?")
CD.style.display = "none"
} else {
console.log("niets")
}
})
})
})
}
})
})
})
Таким образом, идея состоит в том, что значения фильтра пустого массива заполняются значениями фильтра из выбора в DOM. Затем код проверяет, включает ли значения фильтра в массиве значения из базы данных, и фильтрует выходные данные базы данных.
Я пытаюсь очищать массив каждый раз, когда кнопка filter получает щелчок с filtervalues.length = 0, но массив не будет пустым. Без этой строки (filtervalues.length = 0) массив filtervalues будет заполняться экспоненциально (на скриншоте ниже вы можете видеть мои два смежных клика на кнопке фильтра в DOM. Как вы можете видеть в консоли, массив состоит из 4 результатов до 8 результатов. Без функции length = 0 она будет go от 4 до 12. Я предполагаю, что проблема связана с этим, но я не могу понять, как и почему ..)
И Вот снимок экрана массива фильтров, когда я console.log (filterValues) и дважды нажимаю кнопку фильтра:
Как получить массив быть пустым, когда я повторяю функцию?