All language subtitles for 5. Building the Restaurant Page

In this video.

What we're going to do is go ahead and build out the restaurants page.

Now, let's remember exactly what this is going to look like.

We have the nav bar, but we're also going to have this table right over here that's going to show the

top 50 of restaurants.

Now, building this from scratch, building out the HTML as well as this here says is going to be relatively

cumbersome, boring, and it's not really going to be Nux related.

So just for the HTML and cc, what we're going to do is just copy the component that builds out this

table, but anything related to view and JavaScript and Nux we are going to do from scratch.

So let's actually go ahead and do this.

Now, in order to do this, what I need you to understand is this is going to be made up of two different

components.

So we have the table as a whole, and then within each table we have these rows and this row is going

to be a component as well.

So let's go ahead and go over here to our components directory.

And I'm actually going to create a restaurant.

So restaurants or restaurant component directory right over here.

Now in here, I'm going to create a table dot view file, table W file like.

So now attached to this video, you should be able to copy and paste a boilerplate template for both

the table as well as the row.

So I'm going to go ahead over here and I'll touch both of them in the video so you don't have to go

search around.

But you can see here we get this nice template.

So let's go ahead and copy that in.

I'm going to go ahead and piece that in.

So this is for the table.

So we got this div, we have this H1 and then right over here we have the table container and then in

here we have both table columns.

So as you can see here, we have two columns.

Then over here we have both two divs that are going to house our rows.

So I'm going to go ahead and save that.

And then over here, I'm also going to create a row dot view file.

Now I'm going to go back again.

I'll have this linked for you guys.

Just go ahead and copy this again.

Just the HTML as well as some see as says.

So we don't waste time doing this ourselves.

All right.

There we go.

So you can see now we got this row, we have an H four that's indicating the rank.

And then over here we have the anger tag that indicates a thing, the actual restaurant.

Now, this is hardcoded, but obviously later on we're not going to hardcoded this.

We are going to make it dynamic.

So now what I want to do is I actually want to go to this table and just render one restaurant row.

So remember how to do that.

You go over here.

This is the directory where the row live.

So it's going to be a restaurant.

Row is the component that we want to render.

So restaurant.

And again, keep in mind the spelling.

Restaurant row.

Very difficult words to spell.

And now what we're going to do is inside of here, we're going to get rid of this h for.

We're going to create a div we're going to wrap this in a container.

And then in here we're going to say restaurant like so.

And then we're going to say table just to render the table.

So let's go over here and let's do a quick refresh.

And there you go.

You can see we have our wonderful table.

So now what do we want to do?

Well, now, of course, what we want to do is I think let's iterate over the array of restaurants and

render a row for each particular restaurant.

So I think that is the best thing to do at the moment.

So that actually begs the question, well, where are we going to get that data from?

So where are we going to get this restaurant data?

Well, similarly to the row as well as the table file, I actually have some hard coded data that I'll

also link in the attached to this video as well.

So I'm going to go to it manually.

But again, you guys are not going to have to do that.

So this is just going to be a data dodge JSON file.

This is going to have a bunch of different data about restaurants.

So I'm going to go here.

I'm just going to grab all that.

I'm going to grab every single one and copy that.

And then over here, right in the root directory, I'm going to create a data dot JSON file.

I'm going to paste that data in.

Again, this is just hard coded data.

Typically, data would come from a server.

We'll talk about how we can make HTTP requests to servers a little bit later, but there we go.

This is what we have thus far.

So each object has an idea, it has a rank.

It also has the name of the restaurant, some content, which is Lorem Ibsen, which is consistent throughout

every single one, the revenue, the number of stores they have as well as an image.

So this is the data that we have.

So now what I want to do is inside of this table, I want to essentially iterate over that data and

then for each data I want to render a restaurant row.

So let's actually go ahead and do that.

But in order to do this, what I want to do here and let's actually take a look what we want to do here

is we want to render the first 25 in this column and then the next 25 in this column.

So we need to somehow split this because the data is just one large array.

So I actually have a suggestion.

Let's just go over here.

Let's say script setup, let's get rid of this is just the boilerplate that I always get script set

up.

Lang is equal to TypeScript because of course we are going to be using TypeScript.

And what I'm going to do here is I'm going to say I'm going to create a new constant and I'm going to

call this restaurants organized first.

That's so I'm going to call it and this is going to be an object.

I'm going to say first and this is going to be and now what we're going to do is we're going to grab

those restaurant data.

So I'm going to say import restaurants from and I'm going to say from ads just so we can go to the root

directory and then from data dot Jason so this is going to give us our restaurants.

I'm going to say that this is going to be I'm going to go ahead and create a new array and this structure

out everything in that array and then I'm going to splice from 0 to 25.

So this should give us the first 25 elements and attach it to this first object right over here.

And then we're going to say maybe second, and then over here we're going to say something like restaurants

and then over here we're going to say Dot Splice.

I say start from 25 and I want the next 25 like so and this should give us the first 25 as well as the

second 25.

So this is good.

This is really good.

Now, of course, what we can do is actually iterate over them in both of these columns.

Now you could argue that we could also make these columns components as well, and then iterate over

them, but we'll just leave it as it is for now.

So let's go over here.

We're going to say v four and what I'm going to say is V for and I'm going to say for the restaurant.

Restaurant and then I'm going to say in restaurant organized dot first.

And then, of course, we need to supply this with the key.

So I'm going to say key is going to be equal to restaurant ID because remember, this has an ID restaurant

that I.D. like.

So let's go ahead and save that.

And that should pretty much better should allow us to render multiple different restaurants.

And there we go.

Well, not multiple different restaurants, but for each iteration, we're going to render a restaurant.

Okay.

So that's step number one.

Now, let's go ahead over here and let's do the exact same thing.

Now over here, what we're going to do is we're going to say restaurant dot second and there we go.

So this is looking good.

Now, of course, now what we need to do is all quite a bit of things.

There's just a lot that we actually need to do.

So the first thing that we need to do, of course, is start accepting props so we don't, you know,

hardcoded this data.

We want to show more dynamic data.

That's step number one.

Step number two would be to show this header right over here.

So this would be another thing that we would want to show.

And then the other thing that we are missing is the highlighting.

So you can see here, you know, over here we have this gray highlighting and we have this white highlighting,

this gray highlighting and then this white highlighting.

So this is what we have.

And then obviously over here, we don't have that at the moment.

So this is something that we actually need to work on.

So let's do that in the next video.