In this lesson, we're going to be setting up our own testing server, using GitHub repository, so
creating a DB JSON file and this is the contents of my testing, one where we're just loading in post
information.
So we're getting all of the posts from the endpoint and we're iterating through all of the posts.
We can simulate that and load that.
So if you want post number one, we can also see post number two so we can simulate getting back the
post data from the endpoint.
And this is all done through my JSON server type code, so you need to have a GitHub account in order
to do this and then make sure that you've got some valid JSON data that you've got within your JSON
database and then you can use that as an endpoint and connect to it.
And in this case, what we're doing is we're just doing a simple request and loading the contents.
There's also options to connect using get posts, put patch and delete.
So these changes aren't going to be persistent.
Your data within the DP, Jason, it's not going to change, but you will get a response from the endpoint.
So it's an excellent way to simulate working with a server data and JSON data.
Within your application, opening up the ED, we've created the index HTML file that's got the standard
device that we've been using in the previous lessons and we're linking it to Code six, G.S. within
Code six, DOT, G.S. selecting the elements from the page, adding an event listener.
So whenever the button gets clicked, we get the ready message within the console.
And then I've also kept in the function to add elements to the page.
This gives us an easy way to create elements and append them to the page.
And I'm just going to make an update to this to be appending it to the pages that are preparing it as
we're going to be adding content to the page when we're making connections to the endpoint.
So this lesson is also going to be how you can set up your own endpoint.
So going over to Jason Placeholder type code dot com.
So that's the endpoint that we've been working with in the previous couple lessons.
There's also an option to set up a might JSON server.
So within my JSON server you can set a decent server and have your own file running on the server and
this is how you can structure the file.
So what you do is you create a file called DB, JSON and get the repo and the user information to get
all of that.
And that way you can run the repo and get the server information directly from this end point.
So let's go ahead and copy the base, your URL, and then we'll update this to match the endpoint that
we're going to be creating.
So for the base euro and it's going to require the user and the repoll.
So that is what we're going to be updating and we need to create that and creating that with git repository.
So it does give you the brief examples of create a repository on GitHub.
So you do need to have a GitHub account, create a DB Duchesse on file, and then you can update and
access your own server.
And this is directly coming from GitHub.
This is a quick and easy way to set up JSON server that you can interact with and have some data that
you can access online.
So I'm going to go over to GitHub, log in to my GitHub account, create a new repository, so give
the repository a name testing database.
And just leave that open to the public, you can you don't have to add a README file, you can if you
want.
And within the repository, so this is going to be our testing database repository and GitHub, and
we can add files to it as well.
So let's go ahead and create a brand new file.
And according to the instructions, we got to give this file file name of TB, Jason.
And then within the DB that Jason, we can set up the Jason information and actually let's extend on
this.
So adding in additional parameters.
So if you want maybe body to that testing.
And you can, of course, add whatever content you want, as long as it's properly structured with an
adjacent structure.
So let's update and we'll add a few more posts as this can have an idea of two can have hello to and
testing to.
And let's do one more where we've got three.
And this will just say hello three and testing three.
So once you've created your JSON database file, so you're going to be connecting to this using the
JSON, my JSON server.
So commit the file and that will create the file within the repository.
And typically you will and you should include a read me file.
So what I'll do is I'll just set up and I'll just copy within the README file the instructions on how
to.
So I'll add that file as well to the repository.
So within this testing database repository we've got just deep, deep JSON and then this is going to
be the path that we need to connect to.
So that includes the user and the ripple that we want to use and just make sure that we get it correct.
So the user and then the people that we want to use and then forward slash that and we can select all
of the content that's currently within that REPL.
And using the same structure that they have here, we're going to connect to it and get all of the post
information, so do posts, and that should return back all of the post data.
And then when instead of loading the data, let's make the Futch request.
And we'll just make the Futch request actually to the base, Yoro, so that's the initial Futch request
to the base, you, Earl, or for a consistency we can create a euro object and that will give us the
structure in order to update the euro path.
So make a connection, then return back the response object
and take the response object and send it to the next promise with as JSON data.
And then lastly, we get the data that's being returned back and we're going to put that contents of
the data into the console.
So I hadn't included that.
That's we're throwing an error there and it looks like I'm still getting an error.
So that means that the syntax, the JSON syntaxes incorrect and that's the error response that we're
getting.
So let's double check and make sure that our syntax is correct so you can use that within a limiting
application.
So let's open up the Jason Lente and paste and that do a validate JSON.
So it immediately caught the parsing error.
So the problem was that it wasn't valid.
Jason data.
So I had left in that extra comma so that I can throw things off.
So make the change, commit the change and now I've got a valid JSON object.
And that's also another thing that you can do as well.
Just make sure that when you do construct the JSON object that it is valid JSON and you can double check
it with Jason Linta tool.
So let's refresh and click it.
And also, if we were to place the URL, we see that we do have that error here.
So with get it does take a few minutes usually just to do a refresh and once it reloads the output data,
so once you can see it within the Web browser, you should also be able to load it within.
You write a Web application and then from here you can take the content that you've got on get and do
something with it.
So we'll create some quick loading of the content.
So it's already within an array, the data array, so create a page and creating a function in order
to handle the create page.
So taking that data, Jason, data object and first thing we'll do is we'll output and in our HTML will
clear out the existing page content with an output.
And take data going through each item within data, and that's selecting each one of the elements,
so the structure is body ID and title, so creating a main object and then we'll drop the rest of them
into mean.
So structure for adding the element is whatever the parent is.
So use output, the type of element is going to be a div and the contents are just going to be blank
for this one as this is our main parent.
So that adds that to the page.
Let's also add one for the title
and using the same structure.
We can add to the main object and adding in a div and selecting the content, and that's going to be
contained within the data.
So that's just data title.
And if we're not using or applying any styling to the element, we can even shorten it by that.
We don't need the callback element object, so we're not going to be making use of it.
And this is just a simple demonstration.
So we've got the body contents.
And then also let's add one more element, and this can be whatever the ideas and Fermín itself using
class list lets out of class and I'll just start a quick styling box to it.
Let's create the box elements.
And with us and also adding in a border.
Margin, and so the margin for top and bottom can be 10 picks and auto.
And also, let's add some padding and update the font size.
So there we go.
So let's click it and see what we get for output, and it's not actually passing over to create a page
and actually there should be an element instead of data.
So that was the problem there is using the wrong object value.
So make an update to that.
And this time it should work where we're outputting the content that's actually sitting within our GitHub
data object.
So it's a quick and easy way that you can create an endpoint with your own data and so can point so
you can interact with it and you could find out more information about Jason.
Type code, so you can do you can use get post, put patch, delete, the changes aren't persistent
between calls, so it's just like what we saw last time where we can within the last lesson where we
can make the requests.
But they're not persistent between calls.
So just keep that in mind that this is just a testing database.
And the only one that's going to work is that get requests where you're actually making a request and
getting the contents back from the JSON data.
And I'll also update the input value.
And I'll set that to display and just update the style.
To display and will hide that input as we don't need to interact with them and also for the button,
let's update the text content for the button and load GitHub.
Jason, data.
And see how that looks.
So that gives us the ability to load the data to for this lesson or to create a report on GitHub and
then add to that report, ADP, that on file create some custom JSON and add that into the deep Duchesse
on file and then using JavaScript to connect to that end point on the my JSON server type code and select
the content using JavaScript fetch, return it back as a JSON object, make some requests to the endpoint,
return the data onto the web page and then output the contents of the data that's sitting on GitHub
and output it within your web page elements.