Vue.js RapidAPI anime database integration not displaying data properly

[ameliat]

I’m building a movie database app using Vue.js and having trouble with API integration. The data fetching seems to work but the movie titles won’t show up on screen. I’m still learning Vue so maybe I made a basic mistake somewhere.

Main component code:

<template>
  <div class="movieList">
    <h1>Popular Movies</h1>
    <div class="container">
      <MovieCard v-for="movie in movieData" :key="movie.id" :movieDetails="movie"/>
    </div>
  </div>
</template>

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

const movieData = ref([])

onMounted(() => {
  const apiUrl = 'https://movie-database.p.rapidapi.com/movies?page=1&limit=10';
  const requestOptions = {
    method: 'GET',
    headers: {
      'x-rapidapi-key': 'your-api-key-here',
      'x-rapidapi-host': 'movie-database.p.rapidapi.com'
    }
  }

  fetch(apiUrl, requestOptions)
    .then((res) => res.json())
    .then((result) => {
      movieData.value = result.data
    })
    .catch((err) => console.error('API request failed', err))
})
</script>

<style scoped>
.container {
  display: flex;
  flex-wrap: wrap;
}
</style>

Movie card component:

<template>
  <div class="movie-card">
    <h3>{{ movieDetails.movies.name }}</h3>
  </div>
</template>

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

<style scoped>
.movie-card {
  padding: 1rem;
  margin: 0.5rem;
}
</style>

I’ve tried different ways to access the title property and checked the fetch response but still can’t get it working. Any ideas what I’m doing wrong?

[Mike71]

you’re accessing movieDetails.movies.name but that’s probably the wrong path. most movie apis put the title directly on each object, so try movieDetails.title instead. also, throw some console.log statements in your MovieCard component to see what props r actually getting passed down.

[nina.k]

The Problem:

You’re building a movie database app with Vue.js and are having trouble displaying movie titles fetched from an API. The API call appears to work, but the titles aren’t rendering on the screen. Your MovieCard component is attempting to access the title using the wrong path within the API response data.

Understanding the “Why” (The Root Cause):

The core issue is an incorrect data path in your MovieCard component. You are assuming the movie title is located at movieDetails.movies.name, but the API response likely doesn’t structure the data that way. Many APIs return the movie title directly under the main movie object (e.g., movieDetails.title, movieDetails.name, or movieDetails.original_title). Your MovieCard component is trying to access a nested movies property which doesn’t exist, causing the title to not render. Additionally, the API response might be structured differently than expected or even return an empty array, preventing your code from working correctly.

Step-by-Step Guide:

Step 1: Inspect the API Response:

The most crucial step is to inspect the actual structure of your API response. Add the following console.log statements to your main component’s onMounted function to see the full response and the data property specifically:

onMounted(() => {
  // ... your existing code ...

  .then((result) => {
    console.log('Full API response:', result); // Log the entire response
    console.log('Data:', result.data);          // Log only the 'data' property
    movieData.value = result.data;
  })
  // ... your existing code ...
})

Open your browser’s developer console (usually by pressing F12). Examine the logged data carefully. Pay close attention to how the movie data is nested. Find the exact path to the title property within a single movie object. It might be result.data[0].title, result.data[0].name, or something similar, depending on your API’s structure. Do not assume the structure.

Step 2: Correct the Data Path in MovieCard:

Once you’ve identified the correct path to the title from Step 1, update your MovieCard component to use the correct property. For example, if the title is directly under the main object, you’d use:

<template>
  <div class="movie-card">
    <h3>{{ movieDetails.title }}</h3> </div>
</template>

Or if it’s original_title:

<template>
  <div class="movie-card">
    <h3>{{ movieDetails.original_title }}</h3> </div>
</template>

Replace title or original_title with the actual property name you found in your API response.

Step 3: Handle Potential Errors:

To make your application more robust, add error handling to gracefully handle cases where the API response is unexpected or the movieDetails object might be missing the expected property:

<template>
  <div class="movie-card">
    <h3>{{ movieDetails.title || 'Title not available' }}</h3>
  </div>
</template>

This will display “Title not available” if movieDetails.title is undefined or null.

Common Pitfalls & What to Check Next:

• Incorrect API Key: Double-check that your x-rapidapi-key is correct and hasn’t expired.
• API Rate Limits: Some APIs have rate limits. If you’re making too many requests, your calls might be blocked temporarily.
• Network Issues: Ensure you have a stable internet connection.
• API Response Structure Variations: Different movie APIs have varying response structures. Be prepared to adapt your code based on the specific API’s documentation.

Still running into issues? Share your (sanitized) config files, the exact command you ran, and any other relevant details. The community is here to help!

[miar]

The issue lies in how you’re accessing the data in MovieCard. Currently, you’re using movieDetails.movies.name, but based on your API response, each movie object is likely structured differently. I recommend logging the response from your API to see its actual structure using console.log(result) and console.log(result.data). This will help you identify which property holds the movie title. Many movie APIs typically use title, original_title, or just name directly on each movie object, not nested under a movies property. Once you determine the correct property path, update your MovieCard accordingly. Additionally, consider implementing error handling to display a fallback if the property doesn’t exist.

[RunningTiger]

Your code’s breaking on the data structure access in MovieCard. But there’s another issue nobody’s mentioned - you might be getting an empty array or the API response structure could be totally different than what you expect. I’ve hit this before where the API docs show one thing but the actual response is nested completely differently. Add console.log('Full API response:', result) right after your fetch to see what you’re actually getting. These movie APIs often wrap the movie array in extra metadata objects. Also check if result.data is even an array. Some APIs return result.results or result.movies instead. Once you figure out the correct path to your movie array, then fix the individual movie property access. The title is usually just title, name, or original_title directly on each movie object - not nested under a movies property like you have now.