0

I have followed a tutorial online to create a movie app using Vue JS and fetch. The functionality, when working, is that I can search a movie and a number of results are populated on the screen including the poster, title and year. After completing the tutorial with everything working, I've tried to change which API I'm using (from omdb to themoviedb). After trying to hook up the new API, the search returns blank.

I've used the network tool on chrome to establish that I am receiving a response from the API, but somewhere I'm going wrong as nothing is displaying. Note: I know the poster will not work (because themoviedb returns this as an incomplete path) but why wont the title and year display? I've added my code below - please help me understand what I am missing.

      <div class="movie" v-for="movie in movies" :key="movie.imdbID">
        <router-link :to="'/movie/' + movie.imdbID" class="movie-link">
          <div class="product-image">
            <img :src="movie.Poster" alt="Movie Poster" />
            <div class="type">{{ movie.Type }}</div>
          </div>
          <div class="detail">
            <p class="year">{{ movie.release_date }}</p>
            <p class="imdb">{{ movie.vote_average }} </p>
            <h3>{{ movie.original_title}}</h3> 

          </div>
        </router-link>
      </div>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue';
import env from '@/env.js'

export default {
  setup () {
    const search = ref("");
    const movies = ref([]);

    const SearchMovies = () => {
      if (search.value != "") {
      //fetch(`http://www.omdbapi.com/?apikey=${env.apikey}&s=${search.value}`)
       fetch(`https://api.themoviedb.org/3/search/movie?api_key=${env.apikey2}&language=en-US&query=${search.value}&page=1&include_adult=false`)

          .then(response => response.json())
          .then(data => {
            movies.value = data.Search;
            search.value = "";
          });
      }
    }

    return {
      search,
      movies,
      SearchMovies
    }
  }
}
</script>
Mr_Happy
  • 65
  • 1
  • 12
  • welcome to SO, your question is general enough to have many possible root causes / solutions. please try debugging the code line by line and figure out the data flow between your variables - my guess would be that the response from the different APIs is structured differently... – BigFatBaby Apr 12 '21 at 14:46
  • @BigFatBaby You were right, the API was structured differently. I was using 'movies.value = data.Search;'. I have changed this to 'movies.value = data.results' which works. Please can you explain the purpose of this line of code? – Mr_Happy Apr 12 '21 at 14:56

1 Answers1

0

Unfortunately there is no real standard on how to create an external facing API, that in mind every API decides to provide specific interfaces for interaction, as well as the structure of the resulting data. in your case the Search attribute of the response was no longer being filled by the new api - which posted data to the results attribute. debugging is a great way to learn and trace issues in your code.

Usually you can notice these differences in the API documentation - it is extremely helpful.

BigFatBaby
  • 1,525
  • 9
  • 19