How to get all movies from OMDBAPI

JavaScript
1

I am trying to get all movies but the API only returns first 10 movies. Any help would be appreciated.

async getResults() {
        const apiKey = '#########';
        const proxy = 'http://cors-anywhere.herokuapp.com/';
        try {
            const res = await axios(`${proxy}http://www.omdbapi.com/?apikey=${apiKey}&s=${this.query}&type=movie`);
            this.result = res.data;
        } catch (error) {
            console.log(error);
        }

    }
2

I don’t think there is an endpoint for that. It has pagination so you might be able to loop and keep incrementing the page number until the API returns whatever it returns when there are no more pages and just build your own object out of that. But if you are using a free key I suspect you will hit the daily limit pretty fast.

I’m not really sure why you would want such a huge object to work with (all movies are a lot of movies).

3

Before implementing the pagination I need to grab all movie results. Then I can render movies on multiple pages. I know there is way around it I have looked at the documentation and there is nothing I can find.

4

I mean the API has pagination, here is the example they give http://www.omdbapi.com/?s=Batman&page=2.

So you would just keep querying the same endpoint and increment the page number on each loop iteration until it doesn’t return any more results and in the process build out an object with all the results.

5

The parameter page=2 only returns the result of specific page.

6

Yes, and each page will give you 10 results back (or whatever). So you start at page 1 (or 0 not sure) and fetch, then increment the number and fetch again, and so on, until there are no more pages. You construct an object and for each fetch result, you keep adding to that object. In the end, you will have an object with all the results from all the pages.

// Pseudo-ish code
let page = 1;
loop
fetch -> http://www.omdbapi.com/?s=${searchTerm}&page=${page}
add result to object
page++
if no more results end loop
7

I have wrapped code in while loop but still returns 10 movies
while (page <= 5) { const res = await axios({proxy}http://www.omdbapi.com/? apikey={apiKey}&s={this.query}&type=movie&page={page}); this.result = res.data; page++; }

8

I am trying to get all movies but the API only returns 10 movies. Any help would be appreciated. I have tried to wrap my code in while loop and incrementing the page by 1 so to get return more movies but still doesnt seem to work.

async getResults(page = 1) {
        const apiKey = '########';
        const proxy = 'http://cors-anywhere.herokuapp.com/';
        try {

            while (page <= 5) {
                const res = await axios(`${proxy}http://www.omdbapi.com/?apikey=${apiKey}&s=${this.query}&type=movie&page=${page}`);
                this.result = res.data;
                this.page = page;
                page++;
            }

        } catch (error) {
            console.log(error);
        }

    }
}

10movies
10movies1394×278 30.7 KB

9

Have you tried console.logging each of your results inside the while loop?

10

I have console.log the API result as shown in initial post and its giving me only movies.

11

where in your code have you put the console.log? in the snippet it shows just console.log(error)

12

This console.log is for try catch [quote=“ieahleen, post:11, topic:423905”]
console.log(error)
[/quote]

13

where is the console.log for the API result?

14

It prints out the movies when I console.log the property of Search object ‘this.result’.

10movies
10movies1909×736 276 KB

15

I don’t see you constructing the object/array, you just keep reassigning this.result.

16

I store the api response in an object.

17

… and you override that object in each loop. At the end of the loop, it will only have the results from the last loop.

18 
this.result
 is where the api response is stored.
19 
    while (page <= 5) {
                const res = await axios(`${proxy}http://www.omdbapi.com/?apikey=${apiKey}&s=${this.query}&type=movie&page=${page}`);
                this.result = res.data;
                page++;
                console.log(this.result);
            }
20

As said, you keep overwriting the variable. You have to use each fetch result and create your own array or object.

Just as a quick example in case this still isn’t clear:

const moviesList = [];

const getMovies = async () => {
  let page = 1;
  while (page <= 3) {
    const res = await fetch(
      `https://www.omdbapi.com/?apikey=${API_KEY}&s=Batman&page=${page}`
    );
    const movies = await res.json();
    movies.Search.forEach((movie) => moviesList.push(movie));
    page++;
  }
  console.log({ moviesList });
};

getMovies();