Build a Recipe App with Spoonacular API: Part Seven

JavaScript API

English (Auto-generated)

in this cast will be working on the go to source U. R. L. Function which will allow a user to be redirected to a web page for a particular recipe. So for example if I click on cake mix doughnuts which I know is a link out here in the console. You see it says uncaught reference error. Go to source U. R. L. Is not defined. So in our code editor let's go ahead and actually declare this function. So function go to source you are L. And this takes as a parameter and I. D. And out here I'm just going to alert. Mhm. A. D. Now the idea refers to this total data at index I dot I. D. Which is passed to the go to source Uriel function up here in the function built dom which we did in the previous cast. So the I. D. Refers to a unique number which is associated with each dish. And let me go ahead and control s to save this and let's see the I. D. For some of these dishes. So here you can see this is the I. D. For cake balls. This is the I. D. For cake mix doughnuts. Um This is for cake batter chocolates. So each dish has its own unique I. D. Right now what we're going to do is we're going to construct a new U. R. L. And this time what we're fetching is the recipes A source U. R. L. So what we're going to do is we're going to use a recipe I. D. To get the full information about the recipe such as you know ingredients and nutrition. All of this basically all of this information which is associated associated with each unique recipe that has an I. D. S. You have the title image servings ready in minutes. Health score. Ah Spooktacular score so on and so forth. Right. And we can get this information from here. This is the source you are L. That we will be using. So basically let's see get recipe information this one. So this is the source. Yeah this is the U. R. L. Format that we're going to be using. And now what I'll do is back in the code editor. Editor. I'm just gonna go ahead and comment this out and then go down here and I'm going to just go ahead and control the pace is because I already wrote this out. And what I'm doing out here is basically the following the same format. So https and all of this which is perpendicular dot com forward slash recipes forward slash which I get from here. And after that we have to pass in the unique ID. Which is plus I. D. So as you saw when I did alert I. D. Each dish is associated with a unique I. D. And then forward slash information. There you go. And after that I also have to u use my own unique api key for each request. Okay now we're going to be um basically I can also do alert recipe U. R. L. So then you can see the recipe you RL that um is going to be alerted and now if I go back here and back here and control our and then cake and I hope I saved it. But let me I don't think I saved the sole control S and then go back here and let's try cake. Okay cake mix doughnuts. So this is uh the full recipe or l that is constructed. Now what we're going to be doing is we're going to be using fetch method and then the then promise handler. Right? So I'm going to comment this out as well and let me just uh make this pull down and I'm going to say well fetch the recipe. You are L. Right. And then what we're going to do is we're going to do something. What what is returned is a promise. So I need to do something with this promise for now I'm just returning the body of the response that is returned something new. Uh But I just want to get the J. S on And once that is returned I am going to now use another promise handler this time a handling the data which is returned in this part. So line 64 so function and data and we can do console dot log data. And what I will also do is open the U. R. L. In a new window. So I will show this in a bit after I finish typing this out and we do want to open it up in a new tab. So using the underscore blank attribute and okay so control as to save and basically uh so what we're doing out here is we're fetching the recipe, you are L. And then we're extracting the Jason response and in the second then promised handler. We're going to log the data that is returned and let's go ahead and see this. So once again cake. And then let me click this right? And before we go here let's actually look at what is in the console log because this is important and out here in the console log we're going to see all these properties which are associated with the cake mix doughnuts object. And one of the properties is actually the source. You are L. Property. Right? And this is the U. R. L. Of this particular dish. And we're opening up the U. R. L. In a new window with the window dot open method. And this method takes as an argument. The source you are L. Property of the data which is returned. And then underscore blank which basically refers to the opening of the web page in a new attributes in a new page, sorry. And you might have encountered underscore blank value for the target attribute in html. And this is all for the recipe. Um the P. I. Series. So now we've got something functioning and basically, you know, you can check out um all the complete instructions using Spin Ocular A. P. I. And fetch a. P. I.
33 Views 0 Likes 0 Comments

Let's wrap up this series by allowing a user to click on a food dish's heading which will re-direct them to the page with recipe

Leave a comment (supports markdown format)