Interpolating Data & Formatting Notes

[00:00:00]
>> So that's a server and we can send back whatever we want. But now, what we're gonna do is we're gonna write a server that takes all of our notes from our database and creates a website from the notes and puts them on the page so we can view them all.

[00:00:13]
So we can see them without having to do only the get all terminal command, the CLI command, get some visual representation. And you can even add to that, add some JavaScript to it to now you can actually interact with the notes on the actual website. So let's do that.

[00:00:32]
So if you go down to a Vanilla server here. First thing we wanna do is, we need to create the HTML file in which we will embed the notes into. And then we'll have to interpolate those notes into the HTML file. Everyone know what interpolate means? So if you've ever used React, you've been interpolating this whole time, right?

[00:00:58]
To interpolate something means to like, if I have a string. Let's say like this, let's I'm gonna take some data. And I'm gonna return a string that has this is my name, and it's like data.name, that's interpolation. I'm interpolating this data into this string. So I'm gonna replace whatever this is with whatever the value of this is.

[00:01:27]
So I'm gonna interpolate, so we need to do that we need an HTML file that has some placeholder in it that we can swap out with the notes that we pull from our JSON file, right? Cuz we're not gonna put our notes in the HTML file. We wanna keep them in a JSON file, but we need to put them in the HTML file before we send it to the browser so that they show up.

[00:01:47]
Let's do that. I'm actually gonna delete this server.js file because we're gonna create another one. Then the first thing is inside a source, I'm gonna make a template.html. I'm just gonna make a blank html thing, write html5, give us a blank one here, nothing crazy. And then I mean you can put whatever you want here, there's really no right or wrong answer.

[00:02:15]
I'm just gonna put like div.notes, lIke this, and then I'm just gonna put for my interpolated value I'm gonna do double brackets. I was gonna put notes like that. So this will be my placeholder. So we're gonna write some code that's basically gonna replace this with the actual notes that we pull in.

[00:02:37]
That it's gonna replace this with other HTML that we derived from the note that we pull in we'll have to write some dynamic HTML as well. Cuz you just want to stick some JavaScript in here look terrible. So follow me so far? Yeah, The next thing we want to do is install this thing called Open.

[00:03:00]
Open is a package that basically opens the browser for us automatically. Do we need it? No, but it looks cool. So let's do it. So we're gonna npm install open. And again, this is just gonna allow us to automatically open a browser when we want to see our new notes without us having to click on anything or open it ourself.

[00:03:21]
So we'll install open. And the next thing we need to do is start creating some of these functions from the server to starting the server to the interpolating the notes. And all different types of things. So first thing first is I'm just gonna start here cuz I'm not writing that regex from scratch again.

[00:03:39]
So we're [LAUGH] going to create a new file called server.js in the source folder. So make a new file called server JS. And at the top, we're just gonna import the FS. We're gonna import HTTP and we're gonna import open. And then I have this interpolate function.

[00:03:59]
Okay, let's talk about this function. This function does exactly what I said it was going to do. It's going to take in an HTML string and an object with some data on it. And it's going to replace every instance of, this with the appropriate matching property on the data.

[00:04:23]
So it's gonna swap that out. So if there was something called name in that string it's gonna replace it with whatever data name was. If there was something called in our case notes it's gonna replace it with whatever data notes was. And that's what this regex is doing.

[00:04:40]
It's actually not a hard regex. If you look at it, you can see that like look for a left bracket, look for a left bracket, look for any space, look for a word with any letter, look for any space, look for a right bracket, look for a right bracket.

[00:04:54]
Globally, on the entire string. That's what that regex is saying. It's actually not too bad, it's just ugly looking. Then yeah, replace it. So we call it the dot replace on it. Then you can see right here, it tries to replace it with something that's matching on the data.

[00:05:14]
If not, just put an empty string if it doesn't exist. So we now have our interpolate. From here, what we need to do is assuming we need to take in the notes array that we get from our database, and we need to convert them to divs, all right?

[00:05:29]
We want a div for each note. So this is very similar to what you were doing like a React or Svelte or a Vue or something like that. You would you would do this. So, let's do that, so const formatNotes, take some notes. And it's just going to return notes.map on a note.

[00:05:52]
That's just going to return some string here, that's a div with the class of note. And I mean, there's really no right or wrong answer, it's just HTML. I'm just gonna put a P tag here. This is gonna say note.content like that and I'm gonna put another div here for tags or actually I'll put a span here so they sit next to each other.

[00:06:20]
So we got tags here and then, I don't know why I put class name, that's funny. [LAUGH] Actually no, let's do a div. So div tags. And then for each one of those we could just map over it and do a span. So we'll just say note.tags.map, grab this tag, return a new span.

[00:06:49]
So we got a template tag inside of a template tag. This has a class of tag and then inside of here, it's the actual tag. So a little nested interpolation going on there. And then we need to join all this cuz otherwise it'll give us an array. Let's join this on.

[00:07:10]
I mean, it doesn't matter if they touch but for aesthetic purposes, put them on a new line.