Vue.js and RapidAPI: Trouble fetching MyAnimeList data

Other Questions RapidAPI
1 
# Help needed: Vue.js and MyAnimeList API integration

I'm a newbie to Vue.js and I'm building a MyAnimeList clone for practice. I'm stuck trying to show anime titles using the MyAnimeList API from RapidAPI. Nothing seems to work and I'm not sure why.

Here's what I've got so far:

## Main Page Component
```vue
<template>
  <div class="anime-list">
    <h1>Popular Anime</h1>
    <div class="grid">
      <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 apiOptions = {
    method: 'GET',
    headers: {
      'x-rapidapi-key': 'my-api-key',
      'x-rapidapi-host': 'anime-db.p.rapidapi.com'
    }
  }

  fetch(apiUrl, apiOptions)
    .then(res => res.json())
    .then(data => {
      shows.value = data.contents
    })
    .catch(err => console.error('Failed to fetch anime data', err))
})
</script>

AnimeCard Component

<template>
  <div class="anime-card">
    <h2>{{ showData.animes.title }}</h2>
  </div>
</template>

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

I’ve tried different ways to access the title in the card component, but nothing works. Any ideas what I’m doing wrong?

2

I’ve encountered similar issues when working with external APIs in Vue.js projects. One thing that helped me was using axios instead of fetch for API calls. It handles responses more smoothly and has better error handling.

Try installing axios (npm install axios) and then modify your onMounted hook like this:

import axios from 'axios'

onMounted(async () => {
  try {
    const response = await axios.get(apiUrl, { headers: apiOptions.headers })
    shows.value = response.data.data // Adjust based on actual API response structure
  } catch (error) {
    console.error('Error fetching anime data:', error)
  }
})

Also, double-check the API documentation for the correct response structure. Sometimes, APIs change their data format without notice. You might need to adjust how you’re accessing the show data in both your main component and the AnimeCard component.

If you’re still stuck, try console.logging the API response to see its exact structure. This has saved me countless times when dealing with unfamiliar APIs.

3

hey mate, i had similar probs with rapidapi. make sure ur using the right endpoint for MyAnimeList. also, check the data structure in the response. it might be data.data instead of data.contents. for the AnimeCard, try {{ showData.title }} without the ‘animes’ part. hope this helps!

4

I’ve worked with the MyAnimeList API before, and I can spot a few issues in your code. First, the API response structure is different from what you’re expecting. The data is typically under ‘data’, not ‘contents’. Try changing shows.value = data.contents to shows.value = data.data.

Also, in your AnimeCard component, you’re accessing the title incorrectly. It should be {{ showData.title }} instead of {{ showData.animes.title }}. The ‘animes’ property doesn’t exist in the API response.

Lastly, make sure you’re using the correct API endpoint. The one you’re using seems to be from a different provider. The official MyAnimeList API has a different structure.

After making these changes, your code should work. If you’re still having issues, double-check your API key and ensure you’re not hitting any rate limits.