In today's video, we're gonna look at pagination, which is the ability to return just a subset of the results from your A p I to the users so that they can go page forward or Paige back, just the same as how Google search works.

And we're gonna tackle this in three different ways.

First, we're gonna build just the most basic pagination that you can build inside of an A p I.

Secondly, we're gonna take that a step further, and we're gonna make a nice middle where for a pagination so we can apply it to any of the resource is in our a p I.

And then third, we're gonna hook up this simple section of our pagination to a database that we actually have a real world mongo D B database that we can paginated with our A.

P.

I was get started.

Now, as always, I just have a completely blank folder open in visual studio code, and the very first thing we need to do is to run N p m on it with the dash.

Why is the flag and this is going to initialize the repositories with a package da Jason.

Next we need to install the dependencies we're gonna use.

And since we're going to use this server, we need to install Express, which is going to be the framework for our server.

Also, we're gonna install a dead dependency by typing and dash dash save, Dev, And this is going to be for node mon.

And what Node Mon allows us to do is it automatically refreshes our server every single time we make changes.

This way, we don't have to manually stop and start our server every time we make changes now in the package dot Jason, in order to use Node mon, I was just create a simple script.

We're gonna call it Deb start and inside this script, we just want to put no daemon.

And we want to put our server dot Js file just like this and this is going to be a file that we're gonna create now.

So let's create that server dot Js and this is going to be where all of our server code goes.

So let's just make sure we save our package, Jason and then inside of our server dot Js, let's set up the most basic express server we can.

So we want our express variable which we could get from the express library.

We could just say require express And then we also want to get the app portion of that which is just calling this express function flips just like that.

And then lastly, we can just say ap dot Listen, and we can give it a port, for example Port 3000.

And now if we come down here and we type and PM run Dev start, which is that command we just created, you'll see that our server is gonna start up and you say it's starting note server dot Js and our application is listening on Port 3000 and this is great, But right now, we aren't doing anything with this server.

So let's set up our very first route, which is going to be getting a list of users.

We can do that very simply by saying app dot get and we want to get users so we could just say slash users.

And of course, we have a request and our response variable.

And in here we just want to return our users so we could just say, responsive dot Jason, we want to return users, so let's just create that users variable.

And as I mentioned at the beginning of this video, the very first step is just a very simple pagination.

We're not gonna worry about the database that's going to come later in the video.

So for now, we're just gonna create a user's variable.

And we're gonna set this tour own array and inside of here, what's put our user objects.

So our users are goingto have, Let's say an I d of one and we're gonna give them a name, for example user one.

And now I'm just gonna copy this down a bunch of different times so we can simulate having a bunch of users.

I'm just gonna income in all of these numbers just like this.

10 11 12 13 and same thing for the names of the users.

Just get all this out of the way.

10 11 12 13.

Perfect.

Now, if we go down here, save this, you see our application restarted and we can create a file over here, which is gonna be called request dot rest.

And I'm using an extension in visual studio code this extension here is called Where can rest client right here.

And this allows me to make rest request inside of a file called dot rest, for example, we can say that we want to get at a local host 3000.

Make sure you put http at the beginning slash Slash and we want to get slash users just like that and you see the center request button.

If I click that, you'll see it makes the request over here.

As you can see, we get our list of users return to us in Jason, so we know their application is actually working.

What's minimize all this?

Go back to our server so we know that our users is working.

But we actually want to be able to pass what Paige and what offset we want so that we could get on Lee.

The resource is we want and not the whole list because you can imagine this close could be thousands of users long, and we don't want all the users every single time.

So, for example, let's look at our request here, and maybe we want to build a pass.

Some resource is, for example, we want to be able to pass that we want to have a page, Let's say, for example, page one and we also want to pass a limit.

What say that?

We want the limit here just to be five, for example.

So it's the same.

Give me the first page of users and I only want five users from that page.

Obviously, right now, if we send that request, we still get all the users.

It's not actually doing anything.

So let's go into our server and start implementing this.

So inside of this get users function we want to build to get those variables we just passed up.

So we have our page, which is equal to request Doc.

Query got Paige and the exact same thing for that limit.

Variable.

Now we're actually processing this page and limit request that's being sent up to us, and all we need to do is actually get the array that we're returning right now, which is all of our users, and condense that toe only the specific page and the specific users in that limit range.

And the easiest way to do that is to get this START index and the end index of where we're going to be QUERIAN and start indexes, actually fairly simple over doing is taking our page minus one, and we're just multiplying.

It flips times our limit.

So what it's saying is we know that our page that we're on is going to be a page we want.

For example, one is going to be a page one page to his page, too.

But since a raise our zero indexed and these pages are one indexed, we need to make sure we subtract one.

Because Page one is essentially the same as starting a Index zero insider application.

So one minus one would be zero times our limit.

We start at Index zero now moving on to the end index.

This is just going to be a page times limit because we don't need to worry about subtracting one, since we want to get the very end of our array and not the beginning of it.

So now that we have our Start Index and our end index we can do is actually query our users to return just the users in between the start and end index, and that's actually fairly straightforward.

Well, we need to do is say, users dot slice and the slice method.

We pass it a start and an end number and it gives us everything between those So we can just say Start index and End Index.

And we could just use this as a result.

So we could just set this to result users and let's actually return.

That is our Jason.

Now let's make this request again and you can see we get users.

1234 and five These air just our 1st 5 users.

If we change our page to page to make a request, You see, we get the next five, we get six through 10 and we could maybe change this to be a limit of three.

And now if we make the request, you see, we get 456 which is the second page, if you limit by three.

And now this is all great.

But usually when you have a paginated a p I, you actually want to return somewhere inside that a p I what the next page would be and the previous page so that the user knows if there is a next page or if there isn't a next page and same thing with previous page.

It just makes it easier for the client consuming the AP.

I So in order to do this, we actually want to upend extra results to here.

So it's create another very book.

What is gonna call this results?

And we're gonna set it to an empty object.

And then our result users were just gonna save results.

Dot results is going to be equal to thes users, and then we want to return our results.

So now in our request, if we make this again, you see, we have a result section which is going to return our array of users and I we can actually put extra information inside of our object for the next and the previous pages.

So let's do that now what set up next?

So we can say results dot next, and this is just going to be equal to empty her an object.

And the object is goingto have a page as well as a limit property.

And now the limit property is going to stay exactly the same.

We're just gonna pass the limit they passed us.

But as for the page, we actually want to pass the next page.

So we could just say Paige plus one.

And we could do the same exact thing for previous.

And as you guessed that, we just want to do Paige minus one.

So, Paige, minus one.

We want this to be previous.

So now if we do our request again, you see, we haven't next, which is saying Page 21 this is actually problem.

If we go back to our server, this is being passed up as a string.

Same with the limit.

So we want to actually parse this as an ent.

So you just say person and we can do the exact same thing with our limit.

So we want to parse.

That is an imager.

Now, if we say this, make a request.

You'll see there are pages.

Three are limits.

Three previous pages, one and three.

Now, this works great.

But what if we changed page one?

If we make a request, you're going to see our previous is paige zero.

And obviously this is not valid.

There is no Page zero, so we need to make a couple checks inside of our server.

We'll start with the previous one.

First, we want a check to see if we have a previous page, and this is pretty easy.

We just want to see if the start index is greater than zero.

Because this means that are ready Here is not starting at the very first user.

Also, for our next results, we could do a very similar thing.

We just want to check if our index is less than our users dot length and we could put this inside of here.

So what this is saying is that our end is somewhere before the end of our actual users or Ray, so we have extra users to query, so we should show them the next.

And now if we send a request, you see the previous section goes away.

But let's say if we make argument here to be 13 for example, now, if we save this click send request, you see that immediately our next and previous go away because there is no next or previous section that we could go to.

We could even change this down to 10 for example, Save make a request and you can see now next actually shows up as a result because we have a next page.

Since we have more than 10 users.

Now, this is the very basics of how to set a pagination.

But we have to copy this code every time we want to paginated a different user.

Let's say we have a different model was just copy this and what's say we have post and we're gonna change here, User to be post for all these.

Just excuse all this.

So now we have two different models.

We have a post model and a user model and we wanna have a nap dot Get for the post so we can come in here post and, of course, request response.

Now, in order to set this up, we'd have to copy all this code like this and pasted inside a post and change all of our user variables such as here.

Change those two post and that sounds like a lot of work.

So instead, what we want to do is set up some form of middle where were essentially All we do is pass it up here.

We can say paginated results, and all we would do is pass it part post.

And this would actually do all of the pagination for us.

We wouldn't need to do anything ourselves.

So in order to do that, we need to create a function that will handle that.

So it's remove all this code instead of here.

We don't need anything instead of our post.

It would just be completely empty for now, just like that.

Perfect.

Now let's go all the way down, create that function, what's function.

We're gonna call it paginated results and this is going to take the model that we want to paginated and now inside of paginated results.

What we need to do is a middle where function always takes request response and next.

So we need to actually return a function which takes request response and next so we could just return an error function like this.

So normally, when you create middle where you wouldn't be able to pass anything to it, you wouldn't be past this post because you're passing a function that accepts request response and next but in our case, were passing post to this paginated results.

And we know that the result of this function here needs to be another function that takes request response and next.

So down here were making sure we return a function that takes request response and next.

So it'll properly work as a middleware.

And the way middleware works is that actually executes before all of the code inside of your thing.

So we have all this code instead of her app dot get and this middle, where is going to execute before it?