Filter

Filter

In de partials map is een ejs-template toegevoegd waarin het zoekformulier staat. Deze wordt getoond op de matches en op de searchpagina. Na het zoeken op de matchespagina, wordt de gebruiker vanzelf doorgelinkt naar de searchpagina, waarop de resultaten tevoorschijn komen.

De technische uitwerking

GET Request

Om de zoekfunctie werkend te krijgen is om te beginnen een GET request aangemaakt in de routes file.

  .get('/search', auth, (req, res) => {

Variabelen

Vervolgens zijn een aantal variabelen nodig om verder te kunnen met de zoekfunctie.

• searchValue = een array van values die worden meegegeven in het formulier
• searchAge = Omdat we de leeftijd binnen een bereik zoeken, moet aan de array searchValue twee keys worden meegegeven. Eén die het minimum aangeeft en één die de maximum aangeeft. De opbouw van de waarde van de key is zoals mongoose het gebruikt om te filteren.
• users = Object waar de gebruikers in worden gevoegd die voldoen aan de zoekcriteria.

      let searchValue = req.query
      searchAge = searchValue.age = {$gte: req.query.ageMin || 18, $lte: req.query.ageMax || 126}
      let users

Controle ingevoerde data

Vervolgens gaan we de ingegeven waarden controleren en omzetten naar bruikbare waardes. Alle waardes die we niet willen verwijderen we uit de array, zodat alleen gezocht kan worden op waarden die wij aanbieden. De ageMin en ageMax worden ook verwijderd. Deze zijn eerder al toegevoegd aan het searchValue object. Mocht de waarde van de voornaam niet beginnen met een hoofdletter dan wordt dit ook omgezet. Hierdoor maakt het niet uit of je een hoofdletter gebruikt of niet.

      Object.keys(searchValue).forEach(function (key) {
        switch(key){
          case "firstname" :
          const nameCapitalized = searchValue[key].charAt(0).toUpperCase() + searchValue[key].slice(1)
          searchValue[key] = nameCapitalized
          break
          case "age" :
          break
          case "gender" :
          case "favorite" :
          break
          case "ageMin":
          case "ageMax":
          case "save" :
          default :
          delete searchValue[key]
          return;
  }

Als alle keys zijn omgezet naar gewenste waarden of zijn verwijderd uit de array, gaan we kijken naar de values. Wanneer deze undefined, null of Not a Number is, mogen ze uit het searchValue object worden verwijderd.

        switch(searchValue[key]){
          case '' :
          case undefined :
          case null :
          case isNaN() :
          delete searchValue[key]
          break
          default :
          break
}})

Terugsturen naar de client

Wanneer we de zoekwaarden hebben omgezet naar waarden die acceptabel zijn of verwijderd, om ongewenste verzoeken te voorkomen gaan we de gebruikers ophalen uit de database. Met de mongoose Object.find(searchValue}) functie sturen we een verzoek naar de MongoDB om alle gebruikers die overeenkomen met de zoekvraag terug te geven. Deze stoppen we in het object users.

Wanneer dit is gebeurd. Kan het hele pakketje worden verzonden naar de client. De search.ejs pagina wordt gerendered met de waarde users.

      users = User.find(searchValue)

      users
      .then((users) => {
        try{
          console.log(users)
          res.render(('pages/search'), {users, dataTop100})
        } catch (err) {
          res.status(500).send(err)
        }
    })
})