Introduction to Fetch API | Part Two

API JavaScript

English (Auto-generated)

Okay. So in the last code cast we retrieved some data using fetch a P I which we did out here. And now we're going to play around with this returned data which is an array of objects. And so far this is what our code looks like till now. And we've been logging all the data which means all these individual objects with the four key value pairs. Now, what should we do if we only want to get the titles? Right. So in this case, instead of console logging all the data, like we're doing right now we can indeed just a console, we can actually loop through each object and only get the title. So now we're only going to be logging all these titles and for that we can use the key in statement. So for and we'll see that key in data. And what we want to do is just console dot log data at key. And then vlog. Only the title. Right and there you go. So now we were logging only the titles of each object. Okay, now that's okay in the console but we can do more than just log this data in the console. For example we could insert it in the body of a document. And let's do that here. And I've said this web page up and I'm just going to comment this out and now in my promise handler functioning function here. Inside of then method I am going to again just structure So for let key in data, what I want to do is insert the title of each object. So insert the value of the title property of each object inside uh the inner html of the document. So document dot body dot inner html. And then we're just gonna use additional assignment operator and say well at key and once again title. Right. Plus we can just put this br tag here um in control. Yes. And there you go. So now we've inserted all the titles from our Jason placeholder api all the data out here. Right? So if you remember, if I go back here, this is what each object uh looks like with all these key value pairs and we we've just inserted each title. Okay, Only the title value for each object into onto our page out here. Okay, Now we can also use photos, get the photos api so from Jason placeholder out here, I can go back here and they've also got about 5000 like photos. Right? So we can also insert the source of each image. We can actually append images into the document. Let's take a look at this. And this is the U R L. And what I'm going to do out here is now I will just change the U R L from where I'm fetching information and it's going to look like this. So that is the end point forward slash photos. And now, instead of console logging the data and or just putting the title in, I'm going to insert, I'm going to make an image element and I'm going to set the source of the image element here to be this u r l. Right? So that's how we're going to show all these pictures on the web page. Okay, So let's try this out. And I'm going to go ahead and basically uh comment this out because we don't need it. Right? And now, for each object that is returned, what I want to do is I want to create an image. So I'm image element. So I'm going to use the create element method, The dom method. Right? So create element. And what am I creating? Well, I'm creating an image element. Okay, and then the image element, I'm going to set its source attribute to be the value of the data at key. And well, what is that property? And if we go back here to the Jason placeholder, we can see it's the U r L property rights. So the U R L property is basically referring to some image and if I go here, okay, this is the image that it's referring to. So let's go back and then this is going to be the U R L. And now, once I've created the image element, I've set the source attribute of the image element to have a value of the U r l, where the image is, where we're getting the image from, then I need to append it to the document. So I'm gonna say, well, document dot body and I'm gonna use the append child method. Uh and I'm going to append I M. G, which is our image element and control s Now I believe there's 5000 images. This might take some time, but let's hope it's relatively fast and there you go, it wasn't that bad. And here you can see I've gotten all my images from um basically using fetch api I've gotten it from a resource. Right? So um yep, These are 5000 images never ending images, but and this is how we can get some data using fetch and then use it in our own app to do something. And in the next podcast we'll actually do a small project and we'll retrieve a list of recipes that match a user's search input by using the fetch api and another api provided by Spooktacular and see you in the next podcast.
132 Views 0 Likes 0 Comments

A brief introduction to fetch API to kickstart a series of projects using APIs. Here will show the placeholder data on a webpage.

Leave a comment (supports markdown format)