Now, what do we wanna update on the screen
once we got back our data?
Well, in the end, it would be great
if we could replace this text and this button here
with the actual comments that we fetched,
I think that is what we would expect to happen.
So therefore, we wanna go to the post detail EJS file
and then to our comments section,
and at the moment I'm using EJS here
for showing comments if I got some.
Now this works fine, as long as the server side
renders this template and provides a comments key,
but that's not what is going to happen
if our client's site JavaScript code fetched some comments.
Keep in mind that you learned
that all the template markup, which we have here,
like this for loop with these EJS text,
is only rendered and evaluated on the server,
when we render a template.
The client's site finished HTML document, if you inspect it,
does not have any EJS text, because the EJS template
isn't parsed or changed in the browser.
This all happens on the server,
the browser receives the finished HTML page.
So therefore, those EJS instructions here don't do anything
with that dynamically fetched comments data,
which we got through our client's site, JavaScript code.
Instead, what we now wanna do, is we wanna manually
replace the content of this comments section,
so this placeholder text, the button and all of that
with the concrete comments we fetched.
And actually we can already get rid of all these EJS text
and just keep the paragraph,
which we show initially, and the button.
And then I wanna replace the entire content of this section.
So I wanna replace both the paragraph
and the button with my comments if I got them.
So therefore here in comments JS,
we now wanna change the DOM,
we wanna change what's visible on the screen
once we got our response.
For this we need to get access to this section
and we can get access through this ID.
So here, we can get our
comments Section Element
by using document.getelementById
and passing in this comments ID.
And then here, once we got a response,
I wanna
actually replace the content of comments Section Element
with the fetched comments.
Now to replace that content we first of all
need to prepare our list of comments though.
For this I'll add a new helper function, which I'll name,
create Comments List.
And in there, I'll create a new HTML element,
in JavaScript, as we learned it earlier in the course,
when we got started with the DOM and so on,
and we can create a comment List Element here
by using document.createElement
in case that's brand new,
definitely revisit those earlier DOM sections in this course
where we got started with JavaScript and DOM.
And we can create an ordered list element here
or unordered, that's up to you.
Then, I expect to get my comments
as a parameter value here,
so that in this utility helper function,
I can loop through all the comments we got,
so did we can create different comment list item elements
for all the comments.
So here we then got a comment Element, which actually is
created with create Element,
where we create a list item element.
And for this comment Element here,
I'll then set the inner HTML content
to the content I have here
in my included comment-item EJS file.
So we can copy this HTML code
and go back to comments JS,
and then use the template feature here
so that we can write a multiline string
for better structuring, and copy in this HTML code here.
And now we can not just use the template string feature here
to be able to write a multiline string,
which is simply easier to read,
but we can now also inject concrete values here,
just as I showed to you before,
with dollar sign curly braces,
this should be comment, this here.
So we can inject the comment.title here,
and here comment.text.
So these two pieces of data,
which we got in all these comment objects.
You can see this in the browser, in the console,
these comment objects which we fetched,
have a text and a title.
So that's what I'm accessing here.
And then I'm creating this inner HTML content
for all the comment Element list items that I created here.
And then once this comment Element was created,
I just go to my comment List Element that I added here,
and I append this newly added comment list item.
So I go to my comment List Element,
and call append Child or append
to append this comment Element.
Again, these are standards DOM operations
about which we learned early in the course already.
So this will now go through a list of comments,
create a comment List Element,
and then the list item elements,
with their own HTML content.
And then we have such a finished populated,
ordered list in the end.
And I'll return that finished ordered list here,
this comment List Element at the end of this function.
So this is then the finished utility function here.
Again, that's all on the browser side.
And then here in fetch comments for post,
I wanna call this, create Comments List function,
and pass my response data as a parameter value to it
because create Comments List did want a list of comments.
And we know that response Data is such a list of comments.
And therefore here we then got the comments List Element
that was created.
And we can now add this list Element
into our comments Section Element
and replace the current content
of this comments Section Element with it.
For it is we can go to the comment section element
and simply set its inner HTML to an empty string
to remove all the content that's currently in it
before we then call append Child on it
and append our prepared comments List Element.
And there would be different ways of preparing
and outputting these comments as a list as well,
but this approach should also work.
So therefore now, if you again, save all your files
and you reload this page,
if you now click load comments, they do appear here.
And please note that unlike before, if I scroll down,
my scrolling position is not lost
because the page didn't reload.
Because we did fetch that data behind the scenes,
and we then update it to that currently loaded page
with that data by manipulating the DOM
after we got the response from this Ajax request.
So that's working, we also got no errors in the console,
so no error there, and hence we now
already made another huge step forward.
Now we're able to use this Ajax feature
to fetch data behind the scenes
and then update parts of the currently loaded page
with that fetched data.