(ES6) Filter data with an input field (min.array)

Question

I'm working on a website where you can search for music. I want to put a filter option where people can filter on minimum age.

This is my JSON file:

{
  "artists":[
{
"name": "Martin Garrix",
"origin": "Netherlands",
"age": "22 years old",
"artist_id": "c0dc129d8a886a2c9bf487b826c3614a6630fb9c",
"best_song":"https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/98081145&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true"

},

{
  "name": "Armin van Buuren",
  "origin": "Netherlands",
  "age": "41 years old",
  "artist_id": "8b0a178ce06055312456cccc0c9aa7679d8054f1",
  "best_song":"https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/181749728&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true"
},

{
  "name": "Don Diablo",
  "origin": "Netherlands",
  "age": "38 years old",
  "artist_id": "178c6e7e3bf24710d4895048586a86f1bb81d842",
  "best_song":"https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/212802517&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true"


},

{
  "name": "David Guetta",
  "origin": "France",
  "age": "50 years old",
  "artist_id": "c2714423228a8012ad37af0186447cbb7ff589f7",
  "best_song":"https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/140006470&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true"


},

{
  "name": "Alesso",
  "origin": "Sweden",
  "age": "26 years old",
  "artist_id": "69fa09f6e181093fe0ea2ce1a4099066509f7837",
  "best_song":"https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/288914798&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true"

}
]
}

And this is my HTML:

<div class = "div-age">
<label for="age-select">Minimum age</label>
<input type="text" class = "search-age">
</div>

So for example; If you put 40 in the input field, you only get "Armin van Buuren" and "David Guetta".

This is what I have right now.

document.querySelector(`.search-age`).addEventListener(`keyup` , e => {
    const term = e.target.value.toLowerCase();
    const ageList = document.getElementsByClassName(`artist-info`);
    Array.from(ageList).forEach(function(ageList) {
      const artistAge = ageList.querySelector(`.age`).textContent;
      if (artistAge.toLowerCase().includes(term)) {
        ageList.style.display = `flex`;
      } else {
        ageList.style.display = `none`;
      }
    })
  });

The problem I have now, is that it only filter the exact number. So for example, I put 22, I only get "Martin Garrix"

Answer 1

You may try to convert the age string to corresponding number using parseInt and then compare it to the value:

// Convert term and artist's age to corresponding integers
term = parseInt(term, 10);
artistAge = parseInt(artistAge, 10);

if (artistAge >= term) {
  ageList.style.display = `flex`;
} else {
  // ...
}