Why is my API JSON response not being displayed?

Question

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>

Answer 1

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.