按类别过滤 YouTube 视频

Question

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

以下是美国地区的视频类别数据片段：

{
 "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
   }
  }
 ]
}

还附加了接受搜索输入和搜索类型的函数以及returns存储所需搜索结果的数组：

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)中的+是一个shorthand，将元素值（在HTML中是字符串）转为数字

按类别过滤 YouTube 视频

Filter YouTube videos by category

javascript

html

node.js

youtube