javascript - (ES6)使用输入字段过滤数据(min.array)
问题描述
我正在开发一个可以搜索音乐的网站。我想放置一个过滤器选项,人们可以在其中过滤最小年龄。
这是我的 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”
解决方案
使用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);
推荐阅读
- java - 如何从 Spring Boot JPA 存储库中计算总和
- ios - 如何获取在 XCTestDevices 中生成的模拟器的 ID
- python - Django Rest 框架 - 两个序列化程序之间的数据不验证
- python-poetry - “跳过配置文件中指定的 virtualenv 创建”是什么意思。意思是?
- flutter - 如何在 Flutter 中为用户输入验证和 maxLength 创建一个简单的单元测试,并且具有空安全性
- django - Django 对 url 的健康检查
- python - 我怎么能一劳永逸地理解 ajax 与烧瓶的使用?
- highcharts - 具有两个 Y 轴的高图上的奇怪行为
- flutter - 如何在不推送新版本更新的情况下让我的 Flutter 应用程序更改直接上线?
- pandas - Pandas 时间窗口内具有特定值的连续前行的计数