Issues with Myanimelist API Integration in Vue.js Application

Other Questions RapidAPI
1

I’m currently learning Vue.js and working on a MyAnimeList clone for practice. However, I am struggling to display anime titles correctly. I would appreciate any guidance on resolving this issue.

Here’s some relevant code:

<template>
    <div class="topAnime">
      <h1>Featured Anime</h1>
      <div class="card">
        <AnimeCard v-for="show in shows" :key="show.id" :showData="show"/>
      </div>
    </div>
</template>

<script setup>
import AnimeCard from "../components/AnimeCard.vue";
import { onMounted, ref } from "vue";

const shows = ref([]);

onMounted(() => {
const apiUrl = 'https://anime-db.p.rapidapi.com/anime?page=1&size=10';
const requestOptions = {
    method: 'GET',
    headers: {
        'x-rapidapi-key': '5ba5251626msh61775206ad42e40p1981dbjsn73e0574f7887',
        'x-rapidapi-host': 'anime-db.p.rapidapi.com'
    }
};

fetch(apiUrl, requestOptions)
  .then(response => response.json())
  .then(data => {
    shows.value = data.contents;
  })
  .catch(error => console.error('Error fetching data', error));
});
</script>

<style scoped>
a {
  color: black;
  text-decoration: none;
}
</style>

Here’s the card component code:

<template>
    <div>
        <h2>{{ showData.animes.title }}</h2>
    </div>
</template>

<script setup>
defineProps({
    showData: Object
});
</script>

<style scoped>
</style>

I have tested various methods with <h2> and Fetch but have not had any luck.

2

Hi Finn_Mystery,

It looks like the issue might be with accessing the anime titles correctly from the API response in your AnimeCard component. The path you’ve used (showData.animes.title) might not match the structure of the received data.

To fix this, first, log the data.contents to understand the data structure:

fetch(apiUrl, requestOptions)
  .then(response => response.json())
  .then(data => {
    console.log(data.contents); // Check the structure here
    shows.value = data.contents;
  })
  .catch(error => console.error('Error fetching data', error));

Once you have the structure, adjust the path in your AnimeCard like so:


    

        
{{ showData.title }}

Additionally, ensure the keys match exactly as used in the API response. This correction should help you display the anime titles as expected. Let me know if further issues arise!