All right, so I know I kind of tricked you on this one in this lesson, because XIKAR and Fetch are
a little bit longer and this is the third part of this lesson.
And in this lesson, we're going to focus on the challenge.
So the objective of this challenge is to get data from Jason Placeholder type of code Dotcom forgot
to do is so essentially it's a to do list on this website.
So it's an API and create elements that are agreed for completed and read for ones that are not completed
items and list them all out so you can use fetch and you could also use the chart as well.
So it's up to you and do it either way.
That works.
So when you come into the Web page, make sure that you get the URL correct and then load the JSON.
And within the logic side, you can make your request to the URL and output the response information.
So returning back that response information and JSON formatted so you can use response JSON and then
output it and then make use of it within your JavaScript where you loop through the data and then update
depending on what the data value is, you can set the div stellar color to green or red depending on
what the value of the bullet value is of the task.
So go ahead and try this one out, a composite video and I'll walk you through the solution.
So I've got the URL here, and usually when I do use these APIs, I usually go to the URL and just make
sure that it is working if it's working in your browser.
Chances are it should work.
No problem with your code.
So again, I am using the life preview in brackets, so that's giving the ability to have HTTP address.
So some of these APIs, they're going to be restricted if you're using the file protocol.
So make sure that you are on the HTP protocol before you try this and you can use various editors such
as Brackett's in order to accomplish that.
So you go to Live and Live Preview or you can just click the little link here at the Little Lightning
Bolt.
So also, let's select our output area.
And this is going to be that div element that we have on the page, the document and query selector
selecting the development so that we have some more we can output our output.
And you could call this function whatever you want.
So this is a function that's just going to get invoked.
No parameters being passed into the function.
And this is where we've got our futch, where we're fetching to the URL that we provided and then using
then to get the response data and then that response data.
This is going to be returned as JSON.
So we're doing response JSON and then another then.
So this promise and this is where we can make use of the data that's coming in.
So using the data value, first of all, I put it into the console so that we can make sure that everything
is working properly.
So, see, we're putting all of this information into the console, so got all this user information.
So we've got a nice full list here that we can use.
And there's a lot of stuff that's coming in through this API.
The next thing that we want to do, since we've got the data, we've made sure that we did get the data
properly.
Let's create our loop.
So using just a regular for loop, we've got X while X is less than data length.
So this API is different than the other one.
It didn't have results.
So these have to be careful because all these APIs are going to be different.
They're going to be structured different.
We're going to create a div object.
So document and this is what we're going to put the output and it's also going to give us an option
to style that output.
So create element, an element that we're creating.
It's div that we're going to create and then now we've got a condition.
So all of this data that's being outputted, you can see that there's a bunch of values here within
the data.
So we look at the user, we see that completed is a boolean value.
So we can use that and have a condition to check to see if data because this is Boulin, we can check
to see if it is completed and then we can set the div style color to green or we can set it to read.
And we can also do this in another format as well, where we've got the div style using a territory
operator.
So setting the div style color and then checking to see if this value is true.
And if it is, then what we do is we set that to otherwise it's going to get set to red.
And also we want to update the inner text content of that element.
And I just put it out there and data X again and title.
So we get all of that information into the element and next we use output append child and we're going
to pen those lives that were created to see what that looks like.
This has got our full list and it looks like the first ones that are coming in.
So we got quite a bit of data here.
So the first ones that are.
And so they're completely false, and when we get to number four or with the idea for this one is completely
true.
So we're able to output all of that data and make use of it within our JavaScript code.
So do something with the data that's coming in and when you refresh it.
So this list is staying the same.
So it's not changing like the other apps.
So all of this content coming in is staying the same.
So go ahead and try this one out, have some fun with it as there's a lot you can do with that.