How to get json data out of a scope after fetching data in Vue?-CodePudding

I'm new to Vue, javascript & Web development. Using Vue, I tried to recreate the moviedb app(from Brad's 50 JS Projects in 50 Days course).

I'm getting stuck and can't get the data out of a scope.

I've successfully retrieved data & destructured it. But how can I get those values out of that scope (out of setMovies function) and use it in the Vue file (html template)?

Here's my code:

I've made the api_key private

<h1>MovieDesk</h1>
<div >
 

 <!-- Search  -->
 <div >
   <form @submit.prevent="handleSearch">
     <input type="text" placeholder="Search here..." />
     <button @click="handleSearch">Search</button>
   </form>
 </div>
</div>

<!-- Movies -->
<div v-if="searchOn">
 <SearchedMovies />
</div>
<div v-else>
<MovieList/>
</div>
</template>

<script>
// imports-------------------

import { ref } from "@vue/reactivity";
import MovieList from "../components/MovieList.vue";
import SearchedMovies from "../components/SearchedMovies.vue";
import { onMounted } from "@vue/runtime-core";


export default {
components: { MovieList, SearchedMovies },

setup() {
 const searchOn = ref(false);
 const api_url = ref(
   "https://api.themoviedb.org/3/discover/movie?sort_by=popularity.desc&api_key=api_key&page=1"
 );
 const movies = ref([])

// getting the data ------------------------------
 onMounted(() => {
   fetch(api_url.value)
     .then((res) => res.json())
     .then((data) => {
       console.log(data);
       setMovies(data.results);
     });
 });

 
 function setMovies(movies) {
   movies.forEach((movie) => {
     const { title, poster_path, vote_average, overview } = movie;
     
   });
 }


 return { searchOn, setMovies };
},
};
</script> ```

CodePudding user response：

Add 'movies' to the return statement at the bottom of your code, then you should be able to render it.

CodePudding user response：

In your setMovies function, You can set the response in the movies variable and then return that variable from your setup.

function setMovies(apiResponse) {
  movies.value = apiResponse
}

return { movies };

Live Demo :

const { ref, onMounted } = Vue;

const App = {
  setup() {
    const movies = ref([])

    onMounted(() => {
      const apiResponse = [{
        id: 1,
        name: 'Movie 1'
      }, {
        id: 2,
        name: 'Movie 2'
      }, {
        id: 3,
        name: 'Movie 3'
      }];
      setMovies(apiResponse);
    })
    
    function setMovies(res) {
      movies.value = res;
    }

    return {
      movies
    };
  }
};
Vue.createApp(App).mount("#app");

<script src="https://unpkg.com/vue@next"></script>
<div id="app">
  <pre>{{ movies }}</pre>
</div>