（ES6）使用输入字段过滤数据（min.array）

Posted 2023-03-16

【中文标题】（ES6）使用输入字段过滤数据（min.array）

【英文标题】：(ES6) Filter data with an input field (min.array)

【发布时间】：2018-11-20 13:15:29

【问题描述】：

我正在开发一个可以搜索音乐的网站。我想放置一个过滤器选项，人们可以在其中过滤最小年龄。

这是我的 JSON 文件：

  "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"


]

这是我的 html：

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

例如;如果在输入字段中输入 40，则只会得到“Armin van Buuren”和“David Guetta”。

这就是我现在所拥有的。

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`;
      
    )
  );

我现在遇到的问题是它只过滤了确切的数字。例如，我输入 22，我只得到“Martin Garrix”

【参考方案1】：

您可以尝试使用parseInt将年龄字符串转换为相应的数字，然后将其与值进行比较：

// 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 
  // ...

【参考方案2】：

使用filter()，可以通过以下方式进行：

const input = 
  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',
    ,
  ],
;
const minAge = 40;

const output = input.artists.filter(cur => minAge < parseInt(cur.age));
console.log(output);

【参考方案3】：

有几点：

你不需要Template literals，你可以使用纯字符串。

不要使用keyup，而是使用input 作为此类事件的事件：如果用户使用与键盘不同的设备粘贴值，它也会得到结果——例如鼠标。

不要使用getElementsByClassName，因为它会返回一个实时的 HTMLCollection。改用querySelectorAll，它返回一个静态NodeList。也直接支持forEach，不用Array.from。

不要将shadowing 变量作为您编写的代码中的ageList，例如：它会导致意外错误。

说：

// you might not want to query all the time this list,
// every time the user change the input value.
const ageList = document.querySelectorAll('.artist-info');

document.querySelector('.search-age').addEventListener('input' , e => 
    // no need to lowercase, it's numeric.
    // you might want to add some check or constraint on
    // <input> validation
    const term = +e.target.value;

    ageList.forEach(node => 
      const artistAge = node.querySelector('.age').textContent;
      node.style.display = parseInt(artistAge, 10) >= term ? 'flex' : 'none';
    )
  );