This lesson, we're going to output the content of the data object that's being returned back from the
Futch request.
We're going to write it onto the page.
So let's create a few more variables.
I create a variable called Page that's going to be an object that can hold Arpège Contents and provides
some flexibility if we provide a page container.
And here I'm going to just use a document and create elements.
And the element that I can create is just going to be a regular div.
And this is we're I'm going to dump the page contents and I'm also going to use the page main object
and then document.
And this is we're going to select the main object that we want to post the content to to set off to
actually create one, because I do have that section with the class of container.
So let's use query selector and we're going to select the section object.
And if you do have more than one section, the query selector will select the first one and now we can
use page and here we're going to attend.
And the content that we're going to spend is contained within page container.
And let's give some content into the page container.
So the page container and set up some inner text or enter or text content and I'll set that to be Hello
World.
So we're going to dump in within the page container.
We're going to attend it with the contents of Hello World.
So it looks like we're ready and we've got this page container that we can write content into.
So next, let's create a function in order to handle that and I'll just create the function of up here.
And what this function is going to do is this is the one that's actually going to render the posts so
we could call it render posts and that needs some data that's going to loop through and render the post.
It's going to be expecting an array object so that we've got the data.
And using for each we're going to loop through the contents of it and each one of these is going to
be a post and then here, just as we did before, we're going to create a temporary div.
So using the document to create elements and creating a div, this is going to be the the main container
for each one of the posts.
So as we loop through the posts, we're going to output the device and we see that we've got a number
of posts there.
So all we're going to have to do is use the render posts and output the content of JSON data and posts
because it's going to be expecting an array.
So we're sending all of that object information into here and now we're rendering out the posts.
So we haven't written anything out yet.
So let's take the div and we're going to use the inner HTML method and I'll update some of the content
that's contained within the post.
Let's take a look at the post structure.
So they are array based.
So each one of them, as we loop through, I've got a title here for within their structure.
So you also might find that it's an object within these types of APIs, but in this particular case,
it's just an array value.
So the post is going to be an array value.
So we'll use the template literal.
So the curly brackets and then the dollar sign post and then whatever index number it is, the value
that we want to output.
So it looks like maybe we should output the contents of it and then taking the page container and then
using the append method, we're going to spend the div to the page and I got the dollar sign on the
wrong side there.
So now we're outputting the content from the API and this is a template literals.
So these are tactics.
They're not actually single quotes.
So make sure that you are pressing the backpack.
And that's beside the one key to the left of the one key on your keyboard or on most keyboards.
It's a template literals and then to call a variable value in.
Then we use the dollar, sign the curly brackets and then whatever the value is that we want to use
from the JavaScript code.
So it looks like we're able to load that content and we're going to add some more structure to this
coming up, as well as add another element at the bottom that's just going to say that there's more
content to be loaded.
So whenever the person scrolls down to the bottom, they'll see this, that, oh, it's loading at a
load, more content into the bottom part there.
So that's coming up next are quite a few things that we need to still do in the upcoming lessons.
So go ahead, connect to the API, render the content from the API or to your Web page and be ready
to move on to the next lesson.