So this lesson we are going to be connecting to the posts that are contained within the local server
databases, was doing some troubleshooting and returning back content from the database and then outputting
that content on the page.
So we don't have that yet, but we're putting into the console.
We also have that option to make new items, so specifying the title and getting back an ID.
So now when we load it to the page, we're also going to have that brandnew and that was just created.
So that's in this lesson where we're going to be constructing the basic structure for making get and
post requests to our local server endpoint and then also updating the data within the database.
In this lesson, we are going to be connecting to our local server.
So just make sure that your local host, Port three thousand is up and running and that you've got some
content within your JSON debit database.
So connecting to it and we're going to be connecting to it through the front end code, HTML and JavaScript.
So we've got a basic structure here where we've got an input field, a button and an output area, and
that's all contained within the main container element.
So opening up the JavaScript, let's make some connections and first start will select the container
object using the documents and query selector select elements with a class of container.
So we'll add that into one of our objects.
I'm also going to update the view on the ED so that we can see everything within one page.
Let's select the other elements from the page as well.
So we've got our button.
So that's the button one.
And this can act as a submit button.
So that element with the class of button and selecting the elements, the input element with a class
of value, and then also we'll select the output element.
So adding in all of those.
So we've got the value and this is going to be the input area with the class of value.
And then lastly, the output area where we can put the results from our request return values from the
request object and for the button one, add an event listener that that listener that we're adding for
is going to be a click.
So whenever it gets clicked, that's going to fire off the event.
And for now, we're going to log it out into the console that we're ready and ready to go to make our
vets request.
So let's select and we've got ready.
So that means that we are ready to make our vets request.
So starting and let's set up a new URL.
This is going to be where our base, your URL is and that's going to be the local server.
So just running over to the local port localhost three thousand.
And this is only for local testing.
So you typically would have a real endpoint server end point on a real database.
So that's why we're just using the localhost.
So selecting and let's make our Futch request so fetch and construct a new URL and the URL is going
to use the base URL and add to it.
So append to it.
And the endpoint that we're sending to it is going to be the Post's.
So that should return back the all of the post content, and for now we're just going to get method,
so getting the content so the response object and then returning back to the response object with Jason
data and next promise is we get the data and for now we're just put into the console just to make sure
that everything is working as expected.
So going in click and there's our data.
And so this is the live data that's coming from the actual data content.
And for this for this application, we're just going to work with the posts.
I know I do have some additional options.
There are additional routes.
I've got comments and I've got the profile and tester.
So there's a bunch of other routes, but we're going to focus on the posts and the other routes are
going to work the same way where we can make requests.
So let's go ahead and add to the database.
So this was typical Thach requests where we load the page contents and want to load it out onto the
page so you can create a function and get page contents and then that can just take in the data value
and we just move the console message and this is where we can load the page contents.
So we also want to have a post request to the posts and point.
And this is how we can add to the existing content.
So within the database we've got the option for title.
So that's the only input field and we'll just use whatever value is here that we have the input field
and then we're going to use the default authors.
So they're all going to have the same author.
The only thing that's going to be different between them is going to be the input.
So we need to append and add a separate button.
And we could actually use the additional button that we have the button one and I'll update the text
content and then we'll add that listener that's going to load all of the post content.
We're going to load that using the DOM content loaded function.
So it's going to automatically load and make the fetch request.
So selecting the text content
and this can just create new and we're going to take the input value and create a new one for for that.
So using the window add event, listener and event that we're listening for is dom content loaded.
And when that fire is off, phrenologists just log into the console onto page ready and just make sure
that that's working.
So that is working.
So that means that we can update this feature request
and just load all of the page contents.
So whenever the page loads, it's automatically going to load all the page content.
And now for the post of the content into the database, let's update and send using the post method.
So we need to make some updates to this request where we're going to set an object and this will contain
the options.
And this is an object format.
And with the fetch request, we're going to now send it with options and I can console log out the returned
data.
And for the options, the endpoint is going to be the same where we're posting content to it.
So let's update within the options and for this JavaScript object.
So we've got a method and the method that we want to use is going to be a post method and then comma
separated out and the contents that we want to post.
So that's going to be contained within the body of the object.
So let's construct the body and this is going to be an object itself.
So that way we can use JSON, string of fi and string of either body object so that it posts as a string
and within the body object.
So whatever values we want contained in there, we can construct the body contents.
So let's set up a title and the title is going to be the value of the VAL one value.
So the one value and that should just be value and also for author.
And we're going to hardcourt the author.
And of course you can have input fields and change the author and add whatever values you want.
So doing a post and one last parameter that we need is would you need the headers?
So let's set up the headers within the object.
So we want to specify the content dash type and the content type that we're sending is going to be application
for Jason.
So sending it as JSON data and then the semicolon and let's set up the character set and equal that
to UTF eight.
So let's see how that works.
So now we added in title test and of course, we're not posting the content properly into it, but it
did create a new ID and then it returned back to ID content.
So we want to prevent the default action.
So prevent default.
And let's try that one more time and console log out the options just to see what we're passing through
and also need to update this.
So that should be character set.
So let's try that and new.
So it is adding to the database.
So do need to do some troubleshooting to see why it's not passing and then accepting the JSON object,
the body.
And the problem actually is going to be where our database file is located because it's in the same
file directory as our live app and the live server is actually doing a page refresh because the code
has changed.
So let's make a quick update to it and I'll move the location of the database outside of this folder.
And I just went into the.
Terminal, I stopped and I restarted, so now our DB JSON file is actually going to be sitting somewhere
outside of this main folder that we're working on our workspace folder.
So the live server now is no longer refreshing.
So if we do a hello world, do I create new and we see the response object being sent back with the
JavaScript code, then we see that this actually got updated and we added to the database file.
So whatever we type in here, so it's going to be all uppercase.
We add in and we get the response of the ID back.
In addition, let's add one more button to the page and this button can add and just list out everything.
So the same thing that we're doing when the window loads.
So creating a brand new button object.
And what I'll do is I'll create the function to create element and the parameters it's going to require.
So this is the parent.
And then whatever type of element that we want to create and then any of the HTML code that we want
to add into it.
So let's create the elements and using the document, create elements and specifying the type of element
that we want to create and then the parent object and using append, let's append the element to the
page and for the elements, the inner html of the elements.
So set that as the HTML they got passed in and then return back the element object.
So this way we can create an element for the page.
And let's add in a few other buttons to the page.
So button one is going to load all of the content, so be load content or so just say maybe load posts
and that way you can change it around if you want to add and to load the comments.
So on.
And I'll just update this to create my element instead of create element to avoid any confusion with
the create element function within the document object.
So when we create an elements and type of element that we want to create, so in this case, we're adding
in a button and it's going to say a load posts.
And the parent that we're adding it to says also make sure that we're selecting all of the page elements
and we're going to add it into the container.
So now we've got a button for loading the posts.
So it's just added into another div on the page.
And we can also just create a function for this button event.
So.
So this will be just get all posts function.
And we can add that as an event and update the event listener to just get all of the posts.
And let's select that content go down where we got all of the posts, make a quick update to this person
event, object into it so that if we need to prevent the default action, we can select and prevent
the default action.
And I'm just going to realign the content here.
So we're still getting all of the posts whenever the page loads.
So it's outputting here.
And also we can add an event listener to button two that's going to load the posts.
And I'm also going to take this content and create a function in order to handle it.
So selecting the whole event object.
And what this will do is this is going to load the odd item, or I can call it add post.
So this is just to simplify it and make things more readable, so function, add, post and pass an
event object and this is where I just going to paste in the post content and I'm going to realign it.
So just format and just beautify it through the editor.
So it looks like I do have an error here.
So I had an extra rounded bracket and must make sure that this works.
So create posts and go into the database so we're able to create a new post.
So that's working and the load posts within the JavaScript.
So I had to button one and this can just to get all of the posts so that we've got two functions there,
and I'm also where we're adding to the post, I create an object value for title.
And this way, if the title is blank, then whatever we want as a default title will get loaded.
So let's update this value to include title and then also title for title or for value will reset the
value just to be blank.
So once we've picked it up for adding to the post, we can just clear it out and we won't need any of
these console messages anymore.
So let's save it and create a new one.
So we created a default title with the author and ID.
So that post has been added.
Now when we do a loading of the posts, all of the content is there, so we want to load it all onto
the page.
So that's coming up next.
When we continue to build out this application, costs for this lesson are to connect to that local
DB JSON file and get the contents of that file.
So select all of the posts that are contained within JSON file using the routing endpoint for the localhost
PT. three thousand four posts output the response JSON into the console and then create an option for
the user to use the post method to add content from the input field and post it to the database.
So allowing the user to dynamically interact with database content and add to it.