So in order to make these dynamic routes
really useful, we need unique IDs
for all our restaurants
so that we can load the different restaurants
by IDs with help of the dynamic routes.
Now, the restaurants
which we created thus far have no unique IDs.
They have names but those are not necessarily unique.
They are here in my example
but you could add two restaurants with the same name.
Even the website could be duplicated
if multiple users add the same restaurant.
And therefore, I wanna have a way
of assigning a truly unique ID.
And we can achieve this
by adding another third-party package
that helps us with that problem.
We could also try writing some custom code
that produces unique IDs
but that would be some extra work,
which I don't necessarily wanna have.
That's why there is another third-party package,
which we can install into this project with npm install
and that is the uuid package,
which simply stands for uniform unique ID,
but in the end, it's just a package name chosen
by the developers of that package.
We can install it with npm install though,
and if you execute this command,
you will see that in your package.json file,
this is added as a dependency,
and, of course, it was also added
to this node_modules folder
if you scroll down to u.
Now, with that added, we can use it
and I wanna use it whenever we store a new restaurant.
So in app.js, in this post route,
which is executed whenever a request is sent
with some data about a new restaurant,
I now don't just wanna take that request.body,
so that user-submitted data,
but instead, I wanna take it
and enrich it with a extra unique ID.
Now, thankfully, JavaScript makes
that really, really simple and easy.
We have this restaurant,
and that contains an object
because request.body is an object,
and we store what's in request.body in that constant.
Hence this restaurant constant contains this object,
which is that object full of the data submitted by the user,
a object, which has this shape,
because that's what we store
in this restaurants.json array in the end.
So we get this kind of object.
That's what's inside of request.body,
and now in JavaScript, we can easily add an extra field,
a extra property to that object
by using that dot notation, which you already know,
but now I don't access a property, a field
that already exists in that object
but instead, I will access one that doesn't exist.
For example, id.
But this name is up to you.
It just is a property,
which is not part of that incoming object.
Now, there are programming languages
where this would not be allowed.
But in JavaScript, this is allowed,
and if you access a property that doesn't exist
in an object yet,
JavaScript will simply create it for you.
So we can assign a value to this nonexistent property,
and once that was done, the property will exist
because it was added with that value that we assign here.
And here I now wanna assign my unique ID.
Now, for that we installed that third-party package.
Now in order to use it,
we just need to reference it
inside of this app.js file,
just as we are referencing Express
or these built-in packages here.
So here maybe below Express,
though the exact position doesn't matter,
I will now include my uuid package
with help of that require function here, like this.
And this thing, which we reference here,
turns out to be an object.
I know that because I looked up the official documentation
of that package.
And whilst in there,
you see a slightly different syntax here,
in the end, that's just some advanced JavaScript
into which we'll dive a little bit later
but this just means
that we get an object here.
It just looks a bit strange
but we will learn more about this syntax later.
But long story short,
what we get here will be an object
with different methods.
We can call these methods in the place
where we wanna generate an ID.
So here I will reference this uuid object,
which we required,
and there indeed we have a v4 method
that we should execute.
There are different methods
but v4 will give us a good unique ID,
which is randomly generated
but guaranteed to be unique.
And it will give us a string actually,
so what we get here will be some text, a string,
and that will add such a ID to this restaurant object.
And then we'll just save that as before,
and hence, any new restaurants that we add
should have such a unique ID.
Now, of course, that doesn't help us
with the existing restaurants,
so we could delete all of them
and recreate them or what I will do here,
we simply add an ID field manually here
in the restaurants.json file
and just add some made-up unique IDs here,
like r1, r2, and then maybe here r3.
Like that.
Now these existing restaurants have IDs
and any newly added restaurants
will also have IDs.
And with that, we now can use these newly added ID fields
to also fix our templates
because there in restaurants.ejs,
we are using that restaurant-item include
and in that included file,
we have that link,
which is important once we click View Restaurant.
And at the moment, this always points at /restaurants/r1
but that was only a placeholder.
Here instead of having always r1,
I, of course, wanna use the specific unique ID
of the restaurant item that is being displayed here,
just as I'm using the specific name,
and cuisine, and address, and description
of a specific restaurant.
Now, we learned how we can get
some restaurant-specific data here,
and put that into the HTML code.
We just need to use some EJS syntax again.
So we again use this smaller percentage equal sign tag here,
and then the closing tag,
and between that, we can now access some field,
some property in our restaurant,
and when EJS then parses this template,
it will get the concrete value
and put that into the rendered HTML content,
and therefore, also into that link.
So here we can now access restaurant.id,
which is that newly added field,
and that will then generate different links,
different ref attribute values for different restaurants.
And with all of that done,
if you save all those files,
and you start your server,
or you already have it running probably,
so then it's enough if you just save,
if you go back to your page
and you browse those restaurants,
you will see that these different view restaurant links lead
to different detail pages.
And you see that here I'm outputting a different ID
for those different restaurants.
So that is working.
Now, we can also test adding a new restaurant,
and for that, I'll add the Munich Fines Restaurant here
in the Greatstreet 5 in Munich,
and that's some German food, let's say,
and the website is munich-awesome.com, whatever.
And it's in Munich.
That's where I live.
So that's what I'll add here,
and if we now click share restaurant, that works.
And if we now browse restaurants,
we see that restaurant here,
and if I click on View Restaurant,
we see that indeed here,
we also got this ID now
and that's now one of these auto-generated unique IDs.
It's pretty cryptic but it's random and unique,
which is pretty good.
Now, of course, we also wanna work
on that restaurant-detail page
and output concrete restaurant data here,
not just some placeholders and the ID.
And therefore, what we should do next
is we should make sure
that we get the complete restaurant object
into this template here
so that in there, we can do something like this,
and access restaurant.name here, for example.
That's probably what we wanna do there.
And for this, we'll need a way of turning this ID,
which we get here in this route,
this ID parameter,
into a restaurant object from our restaurants.json file.
Now, maybe you find a way of achieving this on your own.
Otherwise, we'll do that together
in the next lecture.