Trouble fetching MyAnimeList data through RapidAPI in Vue.js application

Other Questions RapidAPI
1

Hey everyone, I’m a Vue.js newbie and I’m building a MyAnimeList clone to practice. I’m stuck trying to show anime titles using the MyAnimeList API from RapidAPI. I’ve set up the main page and a card component, but nothing’s showing up. Here’s what I’ve got so far:

<!-- MainPage.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 "./AnimeCard.vue";
import { onMounted, ref } from "vue";

const shows = ref([])

onMounted(() => {
  const apiUrl = 'https://anime-database.example.com/v1/top?limit=10';
  const headers = {
    'x-api-key': 'your-api-key-here',
    'x-host': 'anime-database.example.com'
  }

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

<!-- AnimeCard.vue -->
<template>
  <div class="anime-card">
    <h3>{{ showData.shows.name }}</h3>
  </div>
</template>

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

I’ve tried tweaking the

tag and the fetch call, but no luck. Any ideas what I’m doing wrong? Thanks!

2

I encountered a similar issue when working with external APIs in Vue. One thing that stands out is your API URL and headers. The ‘anime-database.example.com’ looks like a placeholder - make sure you’re using the correct RapidAPI endpoint for MyAnimeList.

Also, check the structure of the response data. Your AnimeCard component tries to access ‘showData.shows.name’, but based on your MainPage setup, it should probably be just ‘showData.name’.

Lastly, I’d recommend using axios instead of fetch for easier error handling. Don’t forget to check your browser’s console for any error messages - they can be incredibly helpful in pinpointing the issue.

If you’re still stuck, try logging the API response to see what data you’re actually receiving. It might not match the structure you’re expecting.

3

Hey MarkSeeker91, I’ve been down this road before with API integrations in Vue. A couple things to check:

First, make sure your RapidAPI credentials are correct. The x-api-key and x-host headers look off. For RapidAPI, you typically need ‘X-RapidAPI-Key’ and ‘X-RapidAPI-Host’ instead.

Also, the API endpoint you’re using (‘anime-database.example.com’) seems to be a placeholder. Double-check the actual MyAnimeList endpoint on RapidAPI.

In your AnimeCard component, you’re trying to access ‘showData.shows.name’. Based on how you’re passing the data, it should just be ‘showData.name’.

Lastly, consider adding some error handling and loading states. It’ll make debugging easier and improve user experience. Something like:

<template>
  <div v-if="loading">Loading...</div>
  <div v-else-if="error">Error: {{ error }}</div>
  <div v-else class="grid">
    <AnimeCard v-for="show in shows" :key="show.id" :showData="show"/>
  </div>
</template>

Hope this helps! Let me know if you need any more guidance.

4

yo MarkSeeker91, i had similar probs. check ur API endpoint - ‘anime-database.example.com’ aint gonna work. Also, in AnimeCard, try {{ showData.name }} instead of {{ showData.shows.name }}. And maybe use a v-if on the card to make sure data’s there before rendering. good luck mate!