Solution Review: Demo App — Part 3
Exercise solution of making API calls using the playlists resource.
Solution: Integrate playlist resources
<!DOCTYPE html>
{% load static %}
<html>
<head>
<title>Video Search Bar using YouTube Data API</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<div class="container" style="margin-top: 25px; margin-bottom: 25px;">
<div class="row">
<a class="col-1" href="/searchResults/">Back</a>
<h1 class="display-6 text-center col-9">YouTube Mini - Channels Stats</h1>
<a href="#platlistsTag" class="btn btn-danger col-2" style="height: 40px;">Playlists</a>
</div>
<br>
{% for resource in data.channelData.items %}
<figure class="text-center">
<blockquote class="blockquote">
<h4 style="color: red;" class="text-center">
Channel Name:
<small class="text-muted">{{resource.snippet.title}}</small>
</h4>
</blockquote>
<figcaption class="blockquote-footer">
Channel Id: <cite title="Source Title"><a target="_blank" style="text-decoration: underline; color: black;" href="https://youtube.com/channel/{{resource.id}}">{{resource.id}}</a></cite>
</figcaption>
</figure>
<br>
<h3 class="text-center"><u>Channel Statistics</u></h3>
<br>
<div class="row g-3">
<div class="col-4 text-center">
<p class="lead">
<span style="color: red; font-size: 16px;">Total views: </span>
{{resource.statistics.viewCount}}
</p>
</div>
<div class="col-4 text-center">
<p class="lead">
<span style="color: red; font-size: 16px;">Total subscribers: </span>
{{resource.statistics.subscriberCount}}
</p>
</div>
<div class="col-4 text-center">
<p class="lead">
<span style="color: red; font-size: 16px;">Total videos: </span>
{{resource.statistics.videoCount}}
</p>
</div>
</div>
<br>
<h3 class="text-center"><u>More Videos</u></h3>
<br>
<div class="container">
<div class="row">
{% for video in data.videosData.items %}
<div class="col center-block text-center" style="margin-bottom: 15px;">
<iframe class="video_display" width="400" height="300" src="https://www.youtube.com/embed/{{video.id.videoId}}" frameborder="5" allowfullscreen></iframe>
<br>
<span class="videoTitle">{{video.videoData.title}}</span>
<br>
<br>
<div id="main">
<form id="stats2" action="{% url 'videoStats' %}" method="POST">
{% csrf_token %}
<button type="submit" class="btn btn-danger" name=videoStatsButton value={{video.id.videoId}}>Video Stats</button>
</form>
</div>
</div>
{% endfor %}
</div>
</div>
<br>
<br>
<h3 class="text-center" id="platlistsTag"><u>More Playlists</u></h3>
<br>
<div class="container">
<div class="row">
{% for playlist in data.playListsData.items %}
<div class="col center-block text-center" style="margin-bottom: 15px;">
<img src={{playlist.snippet.thumbnails.high.url}} alt="Playlist Thumbnail" width="350" height="250">
<br>
<span class="videoTitle">{{playlist.snippet.title}}</span>
<br>
<br>
<div id="main">
<form id="stats2" action="{% url 'playListStats' %}" method="POST">
{% csrf_token %}
<button type="submit" class="btn btn-danger" name=playListButton value={{playlist.id}}>Playlist Stats</button>
</form>
</div>
</div>
{% endfor %}
</div>
</div>
{% endfor %}
</div>
</body>
</html>Solution Review: Demo App — Part 3
Explanation
In the get_playlist_stats() function, the playlist items can be retrieved by using the playlistItems().list method. We use the part ...