I'm currently working on a project where I am integrating movie data from an API (TMDb) using Vue Routers. I have a component named 'MovieList' where I am fetching data from the API.
Below is the data structure:
data() {
return {
movies: []
}
}
Here are the methods being used:
methods: {
getMovies: () => new Promise((resolve, reject) => {
const url = `https://api.themoviedb.org/3/discover/movie?api_key=MyAPI`;
const xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.onload = () => {
if (xhr.status === 200) {
resolve(JSON.parse(xhr.responseText).results);
} else {
reject(Error(xhr.statusText));
}
}
xhr.send();
})
}
and here is the mounted method:
mounted() {
this.getMovies().then(
result => processData(result)
)
function processData(result) {
result.forEach((el) => {
this.movies = el
})
}
}
My goal is to populate the 'movies' array with the data fetched from the API.
You can view a screenshot here:
https://i.sstatic.net/zw7S1.png
Additionally, I am encountering an error in the console:
MovieList.vue?ea6b:34 Uncaught (in promise) TypeError: Cannot set property 'movies' of undefined
at eval (MovieList.vue?ea6b:36)
at Array.forEach (<anonymous>)
at processData (MovieList.vue?ea6b:35)
at eval (MovieList.vue?ea6b:30)
Thank you in advance for any assistance you can provide!