按类别过滤 YouTube 视频

Question

我目前正在开展一个项目，该项目显示来自多个地区的一系列 YouTube 热门视频。目前我正在开发一个允许用户按类别过滤结果的功能，并且不知道从哪里开始实施。

以下是美国地区视频类别数据的 sn-p：

{
 "kind": "youtube#videoCategoryListResponse",
 "etag": "\"m2yskBQFythfE4irbTIeOgYYfBU/S730Ilt-Fi-emsQJvJAAShlR6hM\"",
 "items": [
  {
   "kind": "youtube#videoCategory",
   "etag": "\"m2yskBQFythfE4irbTIeOgYYfBU/Xy1mB4_yLrHy_BmKmPBggty2mZQ\"",
   "id": "1",
   "snippet": {
    "channelId": "UCBR8-60-B28hp2BmDPdntcQ",
    "title": "Film & Animation",
    "assignable": true
   }
  },
  {
   "kind": "youtube#videoCategory",
   "etag": "\"m2yskBQFythfE4irbTIeOgYYfBU/UZ1oLIIz2dxIhO45ZTFR3a3NyTA\"",
   "id": "2",
   "snippet": {
    "channelId": "UCBR8-60-B28hp2BmDPdntcQ",
    "title": "Autos & Vehicles",
    "assignable": true
   }
  }
 ]
}

还附加了接收搜索输入和搜索类型并返回存储所需搜索结果的数组的函数：

function searchFunction(input, searchParameter, region) {
   if (!input) { return []; }

   return videos[region]
      .filter(x => {
         if ((x[searchParameter]).toLowerCase().includes(input.toLowerCase())) {
            return x[searchParameter];
         }
      })
      .map(x => {
         var data = { "title": x.title, "channel_title": x.channel_title, "views": x.views, "likes": x.likes, "dislikes": x.dislikes, "thumbnail_link": x.thumbnail_link };
         return data;
      })
      .reduce((acc, x) => { return acc.reduce((acc, xx) => acc || xx.title == x.title, false) ? acc : [...acc, x]; }, []);
}

我原本想解析每个区域的类别列表并从那里提取title；然而，我们的video 变量存储了category_id：

// parsing data before it (video & channel title, trending date)
[str, rest] = next(rest);
video.category_id = parseInt(str);
// parsing data after it (like/dislike count, # views/comments, etc.)

是否有必要从数据中提取数据？打算使用 HTML/CSS 上的下拉菜单来实现此过滤器，按一个特定类别（而不是多个）过滤视频。

更新（5 月 1 日）

非常缓慢地开始制定解决方案。我已经实现了一个类别的复选框列表：

<select class="inputclass" name="category" id="category">
    <input type="checkbox" name="Film & Animation" value="1" onchange="">Film & Animation<br>
    <input type="checkbox" name="Autos & Vehicles" value="2" onchange="">Autos & Vehicles<br>
    <input type="checkbox" name="Music" value="10" onchange="">Music<br>
    <input type="checkbox" name="Pets & Animals" value="15" onchange="">Pets & Animals<br>
    <input type="checkbox" name="Sports" value="17" onchange="">Sports<br>
    <input type="checkbox" name="Short Movies" value="18" onchange="">Short Movies<br>
    <input type="checkbox" name="Travel & Events" value="19" onchange="">Travel & Events<br>
    <input type="checkbox" name="Gaming" value="20" onchange="">Gaming<br>
    <input type="checkbox" name="Videoblogging" value="21" onchange="">Videoblogging<br>
    <input type="checkbox" name="People & Blogs" value="22" onchange="">People & Blogs<br>
    <input type="checkbox" name="Comedy" value="23" onchange="">Comedy<br>
    <input type="checkbox" name="Entertainment" value="24" onchange="">Entertainment<br>
    <input type="checkbox" name="News & Politics" value="25" onchange="">News & Politics<br>
    <input type="checkbox" name="Howto & Style" value="26" onchange="">Howto & Style<br>
    <input type="checkbox" name="Education" value="27" onchange="">Education<br>
    <input type="checkbox" name="Science & Technology" value="28" onchange="">Science & Technology<br>
    <input type="checkbox" name="Nonprofits & Activism" value="29" onchange="">Nonprofits & Activism<br>
    <input type="checkbox" name="Movies" value="30" onchange="">Movies<br>
    <input type="checkbox" name="Anime/Animation" value="31" onchange="">Anime/Animation<br>
    <input type="checkbox" name="Action/Adventure" value="32" onchange="">Action/Adventure<br>
    <input type="checkbox" name="Classics" value="33" onchange="">Classics<br>
    <input type="checkbox" name="Documentary" value="35" onchange="">Documentary<br>
    <input type="checkbox" name="Drama" value="36" onchange="">Drama<br>
    <input type="checkbox" name="Family" value="37" onchange="">Family<br>
    <input type="checkbox" name="Foreign" value="38" onchange="">Foreign<br>
    <input type="checkbox" name="Horror" value="39" onchange="">Horror<br>
    <input type="checkbox" name="Sci-Fi/Fantasy" value="40" onchange="">Sci-Fi/Fantasy<br>
    <input type="checkbox" name="Thriller" value="41" onchange="">Thriller<br>
    <input type="checkbox" name="Shorts" value="42" onchange="">Shorts<br>
    <input type="checkbox" name="Shows" value="43" onchange="">Shows<br>
    <input type="checkbox" name="Trailers" value="44" onchange="">Trailers<br>
</select>

该函数应访问复选框中的value，并将其与videos 数组中的category_id 与我们的搜索结果进行比较。

更新 2（5 月 2 日）

与最初的实施计划略有偏差。一旦在列表中检查了类别，就会按下一个按钮来过滤结果并将其显示在页面上。 onClick 会调用该函数。

<button class="inputclass" id="filterBtn" onClick="">
   Filter
</button>

任何帮助将不胜感激。非常感谢，如果这令人困惑，请提前道歉。

Answer 1

您有一个 video 对象列表，每个对象都有一个类别 ID 和一个类别 ID 列表。

过滤过程很简单：

function filterVideosByCategory(videos, categoryIds) {
    return videos.filter(vid => categoryIds.includes(vid.category_id));
}

当categoryIds 是一个数字 ID 数组时，您无需执行任何其他操作即可获得过滤列表。

为了从 HTML UI 中获取这个数组，如果你所有的复选框都具有相同的名称，这真的很有帮助：

<input type="checkbox" name="category" value="1">Film &amp; Animation<br>
<input type="checkbox" name="category" value="2">Autos &amp; Vehicles<br>
<input type="checkbox" name="category" value="10">Music<br>
<input type="checkbox" name="category" value="15">Pets &amp; Animals<br>
<input type="checkbox" name="category" value="17">Sports<br>
<input type="checkbox" name="category" value="18">Short Movies<br>
<input type="checkbox" name="category" value="19">Travel &amp; Events<br>
<input type="checkbox" name="category" value="20">Gaming<br>
<input type="checkbox" name="category" value="21">Videoblogging<br>
<input type="checkbox" name="category" value="22">People &amp; Blogs<br>
<input type="checkbox" name="category" value="23">Comedy<br>
<input type="checkbox" name="category" value="24">Entertainment<br>
<input type="checkbox" name="category" value="25">News &amp; Politics<br>
<input type="checkbox" name="category" value="26">Howto &amp; Style<br>
<input type="checkbox" name="category" value="27">Education<br>
<input type="checkbox" name="category" value="28">Science &amp; Technology<br>
<input type="checkbox" name="category" value="29">Nonprofits &amp; Activism<br>
<input type="checkbox" name="category" value="30">Movies<br>
<input type="checkbox" name="category" value="31">Anime/Animation<br>
<input type="checkbox" name="category" value="32">Action/Adventure<br>
<input type="checkbox" name="category" value="33">Classics<br>
<input type="checkbox" name="category" value="35">Documentary<br>
<input type="checkbox" name="category" value="36">Drama<br>
<input type="checkbox" name="category" value="37">Family<br>
<input type="checkbox" name="category" value="38">Foreign<br>
<input type="checkbox" name="category" value="39">Horror<br>
<input type="checkbox" name="category" value="40">Sci-Fi/Fantasy<br>
<input type="checkbox" name="category" value="41">Thriller<br>
<input type="checkbox" name="category" value="42">Shorts<br>
<input type="checkbox" name="category" value="43">Shows<br>
<input type="checkbox" name="category" value="44">Trailers<br>

这样您就可以一次性获取 ID（我假设您在以下示例中包含了 jQuery）：

$(document).on('click', 'input[name=category]', function () {
    var categoryIds = $('input[name=category]:checked').toArray().map((elem) => +elem.value);

    // work with the IDs...
    console.log(categoryIds);
});

.map((elem) => +elem.value) 中的+ 是将元素值（HTML 中的字符串）转换为数字的简写。