How do you empty an array in JS in this specific function (general methods don't seem to work)?

Question

I'm writing a function with the goal to filter some results from a database. Theres a problem I can't figure out:

I can't seem to empty the filter results in the array. I.E. the array with filter results includes the adjacent filter values on top of the previous filter values (see screenshot below) even when I empty the array with every reiteration of the the function.

This is the code:

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

So the idea is that the empty array filtervalues get's filled with the filter values from the select's in the DOM. Next the code inspects if the filter values in the array includes the values from the database and filters the database output.

I try to empty the array every time the filterbutton get's an onclick with filtervalues.length = 0, but the array will not empty. Without this line (filtervalues.length = 0) the filtervalues array will fill up exponentialy (in the screenshot below you can see my two adjacent clicks on the filter button in the DOM. As you can see in the console the array goes from 4 results to 8 results. Without the length = 0 function it will go from 4 to 12. I imagine the problem has to do with this, but I can't figure out how and why..)

And here is a screenshot of the filter array when I console.log(filterValues) and click the filter button twice:

How can I get the array to be empty when I reiterate the function?

*How do you empty an array in JS?* `variableName = []` or `variablename.length = 0` — Rajesh, Apr 16 '20 at 09:01
Does this answer your question? [How do I empty an array in JavaScript?](https://stackoverflow.com/questions/1232040/how-do-i-empty-an-array-in-javascript) — VLAZ, Apr 16 '20 at 09:02

score 0 · Answer 1 · answered Apr 16 '20 at 09:07

0

Uhh just set the variable able to an empty array such as for example myVariable = []

answered Apr 16 '20 at 09:07

Dezz H

322
6
23

(This question has been answered before, it will probably be closed) – evolutionxbox Apr 16 '20 at 09:08
I know how to empty an array in general, but it doesn't work in the function I created and I can't figure out why.. In the code I provided you can see I tried this: filtersValue.length = 0, but the array still won't empty. – Gijs van Beusekom Apr 18 '20 at 07:26

score 0 · Answer 2 · answered Apr 16 '20 at 09:09

0

Try filterValues = []; This would automatically reassign an empty array to filterValues

answered Apr 16 '20 at 09:09

Adeyemi Adekorede

11
1

I tried that approach, but it doesn't empty the array completely.. I think something is happening in the function to prevents the array from emptying, but I can't figure out how and why... – Gijs van Beusekom Apr 18 '20 at 07:25

How do you empty an array in JS in this specific function (general methods don't seem to work)?

2 Answers2