If I want to create a website with details about movies, one crucial aspect is getting information on genres. However, there's a challenge in the main data request where genres are represented by IDs. I need to execute another query that includes these IDs and their corresponding genre names. Within a Vue component, I have set up a for loop to display essential information alongside genres. How can I merge these two queries effectively?
My Code:
movies.js
export default {
actions: {
async getPopularFilms({ commit }) {
const res_movies = await fetch(
'https://api.themoviedb.org/3/movie/popular?api_key=d502a3d84eb533756ec099ef127a2acd&language=en-US&page=1'
);
const { results } = await res_movies.json();
commit('updateFilms', results);
// Fetch genres
const res_genres = await fetch(
'https://api.themoviedb.org/3/genre/movie/list?api_key=d502a3d84eb533756ec099ef127a2acd&language=en-US'
);
const { genres } = await res_genres.json();
let ids = [];
let genres_ids = [];
for (let id = 0; id < results.length; id++) {
ids.push(results[id].genre_ids);
}
for (let id = 0; id < genres.length; id++) {
genres_ids.push(genres[id]);
}
console.log(ids);
console.log(genres_ids);
},
},
mutations: {
updateFilms(state, films) {
state.popular = films;
},
updateGenres(state, genres) {
state.genres = genres;
},
},
state: {
popular: [],
genres: [],
},
getters: {
returnFilms(state) {
return state.popular;
},
returnGenres(state) {
return state.genres;
},
},
};
PopularMovies.vue
<template>
<div class="container mx-auto px-4 pt-8">
<div class="popular-movies">
<h2
class="uppercase tracking-wider text-lg text-orange-500 font-semibold"
>
Popular movies
</h2>
<div
class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4"
>
<div v-for="movies in returnFilms" :key="movies.id" class="mt-8">
<img
:src="'https://image.tmdb.org/t/p/w200' + movies.poster_path"
alt="poster"
class="hover:opacity-75 transition ease-in-out duration-150"
/>
<div class="mt-2">
<p class="text-lg mt-2 hover:text-gray-300">{{ movies.title }}</p>
<div class="flex items-center mt1 text-sm text-gray-400">
<svg class="fill-current text-orange-500 w-4" viewBox="0 0 24 24">
<g data-name="Layer 2">
<path
d="M17.56 21a1 1 0 01-.46-.11L12 18.22l-5.1 2.67a1 1 0 01-1.45-1.06l1-5.63-4.12-4a1 1 0 01-.25-1 1 1 0 01.81-.68l5.7-.83 2.51-5.13a1 1 0 011.8 0l2.54 5.12 5.7.83a1 1 0 01.81.68 1 1 0 01-.25 1l-4.12 4 1 5.63a1 1 0 01-.4 1 1 1 0 01-.62.18z"
data-name="star"
></path>
</g>
</svg>
<span class="ml-1">{{ movies.vote_average * 10 }}%</span>
<span class="mx-2">|</span>
<span>{{ movies.release_date }}</span>
</div>
<div class="text-gray-300 text-sm">aaa</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import { mapGetters, mapActions } from 'vuex';
export default {
name: 'Popular Movies',
computed: {
...mapGetters(['returnFilms']),
},
methods: {
...mapActions(['getPopularFilms']),
},
async mounted() {
this.getPopularFilms();
},
};
</script>
<style lang="scss">
.text-orange-500 {
color: #ed8936;
}
</style>
Screenshots
My gets requests: