私たちが達成したいこと。
映画のスコア(星)を降順に表示したい。
現状
tmdb APIは、映画情報を取得するために使用されます。 そして、モデル映画とテレビはIDと星(スコア)しか持っていません。 ここから、星のあるものだけがhtmlに返されます。
私は質問をしたいこと
htmlでスコアを選択した場合、スコアの降順で表示するにはどうすればよいですか?
data = requests.get(f "https://api.themoviedb.org/3/tv/{tv_id}?api_key={TMDB_API_KEY}&language=en-US")
dataでテレビの情報を得ることができます。
javascript内での操作かdjangoのviewでの操作だと思うのですがどのようにすればいいですか?
def index(request,pk):
movie = Movie.objects.order_by('-stars')
tv = TV.objects.order_by('-stars')
data_movie = []
data_tv = []
for movie_id in movie.id:
data_movie.append(requests.get(f"https://api.themoviedb.org/3/movie/{movie_id}?api_key={TMDB_API_KEY}&language=en-US"))
for tv_id in tv.id:
data_tv.append(requests.get(f"https://api.themoviedb.org/3/tv/{tv_id}?api_key={TMDB_API_KEY}&language=en-US"))
context = {
"data_movie": data_movie,
"data_tv" : data_tv,
}
return render(request, 'Movie/index.html',context)
class Movie(models.Model):
id = models.CharField(primary_key=True, editable=False,
validators=[alphanumeric],max_length = 9999)
stars = models.FloatField(
blank=False,
null=False,
default=0,
validators=[MinValueValidator(0.0),
MaxValueValidator(10.0)]
)
def get_comments(self):
return Comment_movie.objects.filter(movie_id=self.id)
def average_stars(self):
comments = self.get_comments()
n_comments = comments.count()
if n_comments:
self.stars = sum([comment.stars for comment in comments]) / n_comments
else:
self.stars = 0
return self.stars
class TV(models.Model):
id = models.CharField(primary_key=True, editable=False,
validators=[alphanumeric],max_length = 9999)
stars = models.FloatField(
blank=False,
null=False,
default=0,
validators=[MinValueValidator(0.0),
MaxValueValidator(10.0)]
)
def get_comments(self):
return Comment_tv.objects.filter(tv_id=self.id)
def average_stars(self):
comments = self.get_comments()
n_comments = comments.count()
if n_comments:
self.stars = sum([comment.stars for comment in comments]) / n_comments
else:
self.stars = 0
return self.stars
class Comment_movie(models.Model):
comment = models.TextField(max_length=1000)
stars = models.FloatField(
blank=False,
null=False,
default=0,
validators=[MinValueValidator(0.0),
MaxValueValidator(10.0)]
)
user = models.ForeignKey(CustomUser, on_delete=models.CASCADE)
movie = models.ForeignKey(Movie, on_delete=models.CASCADE)
created_at = models.DateTimeField(default=datetime.now)
updated_at = models.DateTimeField(auto_now=True)
class Meta:
unique_together = ('user', 'movie')
indexes = [
models.Index(fields=['user', 'movie']),
]
class Comment_tv(models.Model):
class Meta:
unique_together = ('user', 'tv',)
comment = models.TextField(max_length=1000)
stars = models.FloatField(
blank=False,
null=False,
default=0,
validators=[MinValueValidator(0.0),
MaxValueValidator(10.0)]
)
user = models.ForeignKey(CustomUser, on_delete=models.CASCADE)
tv = models.ForeignKey(TV, on_delete=models.CASCADE)
created_at = models.DateTimeField(default=datetime.now)
updated_at = models.DateTimeField(auto_now=True)
class Meta:
unique_together = ('user', 'tv')
indexes = [
models.Index(fields=['user', 'tv']),
]
{% extends "base.html" %}
{% block content %}
<h2>Trending</h2>
<div class="input-group mb-3">
<select class="form-select" id="media_type">
<option selected>All Trending Media Types</option>
<option value="movie">All Trending Movies(day)</option>
<option value="tv">All Trending TV Shows(day)</option>
<option value="person">All Trending Persons(day)</option>
<option value="score">score</option>
</select>
</div>
<div id="trendings" class="row">
</div>
{% load static %}
<script src="{% static 'js/Movieindex.js' %}"></script>
{% endblock %}
fetchTrendingResults("all", "week")
var mediaType = document.getElementById("media_type")
mediaType.addEventListener("change", function(event) {
fetchTrendingResults(mediaType.options[mediaType.selectedIndex].value, "day")
})
function fetchTrendingResults(media_type, time_window) {
var trendingDiv = document.getElementById("trendings")
trendingDiv.innerHTML = ""
fetch(`/api/trendings?media_type=${media_type}&time_window=${time_window}`, {
method: "GET",
headers: {
"Content-Type": "application/json"
}}
// todo:movieとTVのIDをもらってこれをURLにFethして映画とTVの情報をそれぞれでスターが高い順に表示する。
)
.then(res => res.json())
.then(data => {
for (let i=0; i<data.results.length; i++) {
var mainDiv = document.createElement("div");
mainDiv.setAttribute("class", "card");
mainDiv.setAttribute("style", "width: 18rem;");
var img = document.createElement("img");
img.setAttribute("src", "https://image.tmdb.org/t/p/w200" + data.results[i].poster_path);
img.setAttribute("class", "card-img-top");
img.setAttribute("alt", "...");
var body = document.createElement("div");
body.setAttribute("class", "card-body");
var title = document.createElement("h5");
title.setAttribute("class", "card-title");
if (data.results[i].name) {
title.innerHTML = data.results[i].name;
} else {
title.innerHTML = data.results[i].title;
}
//var text = document.createElement("p");
//text.setAttribute("class", "card-text");
//text.innerHTML = data.results[i].overview;
var link = document.createElement("a");
link.setAttribute("href", "/" + data.results[i].media_type + "/" + data.results[i].id + "/");
link.setAttribute("class", "btn btn-primary");
link.innerHTML = "View Details";
body.appendChild(title);
//body.appendChild(text);
body.appendChild(link);
mainDiv.appendChild(img);
mainDiv.appendChild(body);
document.getElementById("trendings").appendChild(mainDiv);
}
})
}