fetch to fetch all the recipes that match a user's search query. So whenever someone types in this in this input box, for example of the type cake. And then press the search button we want to go grab all the recipes matching this search query which is cake using a spoon tacklers. Api we will then get all the recipes that match the string cake. So anyways, we're working in this um script dot Js file and now we're going to be working on the search function which is attached to this search button here on the web page and in index dot html. It is this button here uh with an on click attribute whose value is equal to the search function. So back in a script dot Js let's work on the search function and let's start off with a function declaration. So function search. And then I'm going to just open close curly braces and I'm just gonna put an alert statement here to let me know that the search function is correctly hooked up to the search pattern and let me go here and just click on it and there you go. Yes. Okay, so that's fine. Now next we only want to search for something uh if someone types in the input box that is it's not empty and let's set up an if else statement. So if we go back to our html out here, you see that our input type is equal to text has an idea of a text search. So just keep that in mind. And now within the function out here, let me go ahead and comment this out and a structure and if else block um like so and let me just put a comment. So end of if end of else and then this is the end of a function search. Right? So now I'm going to go ahead and grab my element with an idea of text search using the get element by ID the method. So I'm gonna stay out here. Well if document dot get element by ID D. And the I. D. For our search input uh is a text search. So text search and then we need to grab the value. So if its value is let's say not equal to an empty string, which means someone has a type in something out here. So if the value of the if the value attribute of this input element which has an idea of text search is not empty. And then we want to fetch data else. We just want to give a custom message to the user inside of this result. Dev And remember we have a reference to the results deV and it's referenced by this variable called result DEV. So we want to say well result div dot inner html And it's equal to Sorry? No such no such food. Okay. So right, so there you go, I've received my document and now let me go ahead and type not type anything here, just press the search button and there you go. So out here on the web page, hopefully you can see this. Sorry, no such food message because I did not type anything here. I just clicked on the search button. So next let's work on what happens inside of the if block if the user types in something and then clicks on the search button. So what we're going to do is we're going to assign the user's input to the global input text variable which we've declared up here on line six. So we're going to say well if it's not empty so someone did type in something then input text is equal to well document dot get element by I. D. And again we're just getting text search and we're grabbing the value of this input element. Right? So that is done. And if you want to double check this, you can always just alert input text to see that if you've grabbed the value when someone types in something. So I'm just going to type in something here cheek and search. There you go. So it lets me know that the input text um value is whatever we type in to the input box which is cake. Right? And I can go ahead. And now since we don't need this, just go ahead and comment this out. Now what we're going to do is we're going to declare a local variable which is going to reference are unique KPI key. Right? So I'm going to within this If conditional block, I'm gonna say well let ap a p I he is equal to and I'm going to go ahead and grab my a P I P. So if you remember last in the last podcast we had made our api key right from spooktacular, so go ahead and just uh copy that right to copy this key. And I'm just gonna copy this key because we needed a copy and then come back and I'm gonna just go ahead and paste that as like this. So a p I my api key is equal to and then paste it here. Okay. So I've pasted my api key now what we need to do is we need to use the fetch method to fetch some data corresponding to the users search input from spooktacular. But before we do that we actually need to construct the U R L. The search U R L which is going to be passed to the fetch method. So what I'm going to do out here is once again I am going to declare a local variable so let fetch U R L is equal to config a p I you are real right plus ap whatever is the value of the api key variable and after that we want to to a string and so we need the ensign and query and before that no, that's fine. And then I need to whatever is the input text variable. Okay, so let's see what's going on here. So we've declared a variable called, fetch U R l which is a reference to the Config a p I U R L, which we've declared up here in the global name space plus your unique api key and the query parameter. Right. Which corresponds to whatever the user typed. Now, query parameters are a defined set of parameters which are attached to the end of the U R L. They are extensions of the U R L which are used to define some specific content or actions based on the data which is being passed. And to append these uh query parameters to the end of the U R L. We are going to just do an equerry which is equal to the input text strength. So once again to just see what we should be getting, I can then do alert and let me do alert um input text. Sorry, not input text, but now alert, fetch U R L. Right. So I want to see my uh the U R L which has been constructed so safe. And then once again just type in something here and click search. So anyways, so this is what has been constructed right now, what we can do is I am going to work on the fetch method which is going to be inside of this first if conditional block. So I'm going to say, well if the text search value is not an empty string, then we'll construct the fetch U. R. L. And then I want to use use the fetch api right? And so uh and pass what are we going to pass to the fetch method? Well we're going to pass in whatever you are L that we just constructed out here and this is gonna be fletch U R L. Okay. And after that. Right, So what fetch U R L. Is what french is doing is it's going to return a promise and after that we have to use a promise handler function so we have to use then in order to handle this data. So what we're going to do next is we're gonna attach then so dot then right. Which is going to execute a function. And what I'm gonna do out here is well it's going to pass in response and then I want to return response dot Jason methods. So use the Jason method. Okay, so what are we doing? We're extracting the body of uh the Jason from the response, we are extracting gap so we're extracting the body of the whatever Jason is returned. So there's headers as well which we don't need, we just need um you know, our Jason which corresponds to the recipe part. And what I can do now is I can alert um response dot Jason. Okay, So I'm just going to alert this out here and it should tell me that your promise is returned. So control S to save and then once again I can just type out anything. And what I can do is also just comment out this alert, fetch U R L. And then a search. Okay. So I'm not getting alerted anything as yet. So let's see what's going on here and I have a small doubt that this could be uh this has to do with our you are l that we've constructed. So let's take a look on why it's not doing that. So let me just actually uh let's fetch U R L. Okay, this is fine out here. So let's see, let's debug. We have to debug what is going on and let's see, mm hmm. So fetch you. RL seems ah fine. Maybe what we have to do is I am thinking a p I config kpi api key plus query alert. Or maybe we can, should I log this? Okay. Instead what we let's just move on and then we'll come back to debugging this. So let's just move on to the next promise handler, which is actually going to get the data for us. So what I can do out here is, well, I'm gonna say once again attach a promise handler function and out here. What I want to do is I want to then maybe console log the data. Right. So let's try this out, console, log data and control us to save. Maybe I didn't save it, maybe that was the issue. But anyways, so I already opened up index dot html in my browser. And let me just type in something here. I already have a couple of search and entries So search. Okay, so that is what I thought response is not defined. Okay, so maybe we have a silly mistake response, not reponse. Let's go ahead and try that out again. Ah search. Okay. So what is going on recipes? Okay. This is what it cannot get first. Js Okay, fetch you. RL what's happening out here? The response a server. Okay. Right. So something going on with our great our fetch you RL because that's part number one. Right. See we want to make sure that the fetch u r l has been constructed properly. And let's just go ahead. Let me just go ahead and alert this first. Let me see what the fetch you are actually just looks like your cake. Okay. Kpi complex search And then I believe what we are missing is actually very small but I believe what we're missing out here is um, it might be are a question mark. Okay. Ah well that shouldn't be the case. But let's just see. We can always also go back to vernacular and go to the docks and see. Well, complex search. Okay. Query query Param mm hmm. Okay, lets just debug this. Mm hmm. So I am pretty sure for a config api maybe we should just put this here and now try it because I believe that is what could be missing console. Okay. There you go. So it was a small issue but our query, sorry. Query. Param was not constructed properly. Okay. So we needed https api dot vernacular dot com and all of this. But with a question mark at the end and everything else returns the same. So we construct our fetch, u r l then we are using, let me just go ahead and comment this out. So after that we use the fetch method and pass in fetch you RL this variables value as an argument. So we're saying, well go grab this all the data from here and after that what is returned is a promise. Right. And we want to then use the then promise handler function to deal with the response that we get and well, how do we deal with the response? Well, we extract the body of the Jason using this uh Jason method on the response which is received from the from fetching the data. And now if let me just try this because I still have this alert here. So I want to see, okay, what is this alert doing here for me. Right, so we don't need this alert but basically I'm getting some data back and what I'm doing at this instance, I'm just going to be using the 10 promise handler function which is going to log to the console. The response data. Right. So let's go ahead and now actually see what's going on in the console and once I head back and do this once again and I'm just gonna type in cake search. Okay. So let's see the response that we have. And in the console we're seeing uh Number offset results which is an array of a few objects, 10 objects and then a total results. Now the results property is an array of objects. Let's take a look at this. And out here each object has um and I. D. And a title. Right? So let's do this. It has an I. D. An image image type and a title. And we have Now the thing to notice out here is basically that I searched for cake but I am getting back a few random recipes which I don't want. For example, we're not searching for um cauliflower brown rice, right? We searched for cake. So let's go ahead and try this again. And let me just type in every week and now I want everything which has to do with wheat. Okay, so this seems to me that we have to maybe uh debug this. So something going on here and I'm guessing that something also has to do with our maybe our query programs. So let's go back because this is not what we want, we want everything to do only with cake. Right? So let's fetch you are well and then let me go back here type and uh wheat. Okay the soul strengthen and and query and maybe it has to be said query is equal to So it should not just say and query wheat it should say and query equal to plus whatever is the input text. So now let's try this out again. So let me go back here. Ok. And refresh once again cake and okay, query is equal to kick and let's see this. Okay? Yes, that is what we had to do to get all the recipes, random recipes that have to do only with cake. Okay. So let's now deconstruct what is actually going on in the response that we received back Right from fetch. So in the research. So this object has a number offset results and total results keys with values. And what is important for us here is the results key which is an array of 10 objects and each object has an I. D. property. It has an image property, image type, property and a title type of property. So what's important for us right now is in our app is the I. D. It's the image and the title. Right? Okay. So what we let's move on now to the next part now that we've basically taken a look at the results property and let's see if we search for some food that doesn't exist. Right? So for example, if I type in something here, which doesn't exist, what happens would write get and out here in the console you're seeing? Well, I get results array where I got the results property, which is an empty array, so there's nothing in it. And in our apps we usually do want to anticipate what the user might or might not do. And then basically write our code. And now what I'm going to say is well back in our code only if the results properties, array has some items in it. Only then do we want to do something? Right? So the condition is that we only want to do something if the length property of the results array in the data object is greater than zero. In which case we're going to assign the results array of the data, which is returned back to us to this total data array, which we defined up here. So let's go ahead and work on that. And inside this first if conditional, once I've fetched all my data, I'm going to say, well, if data. Right? So we want to say if data dot results right? If data dot results dot length is greater than zero, which means that yes, there is something inside this array, then we want to do something right else? We, you know, we're not gonna do anything. And what we should do is basically because, you know, data, write data corresponds to this data that we're getting here, we should work inside this fetch. So I'm saying if, well, once we get the data back, if the results, if the results array is uh you know, have some items in it. So it's length property is greater than zero, then I want to do something. Well, what can we do right now? Let's just put it in the body of our document. Right? So we can say document dot body or better still, we can say well, results dev which results dev which is the div where the actual results will show. Dot inner html is equal to. And I'm gonna say, well, it's going to be equal to Jason. So I'm gonna use the Jason dot string if I method which is going to pass an object and basically return the string. Right? So I'm gonna say data out here. Okay. So that is what we want to do right now. And I just want to check this for now and I can go back here. Maybe we can just try it here. Let's see uh cake. Okay. And um if Jason dot string. If I data dot results. Right. So let's just get this. Okay. Okay, let's see what's happening. So, if data dot results, I just want to see. Okay, why don't we do this 1st 1st? Let's say total data. Okay. Total data is equal to data dot results. Right? We don't want to keep writing data dot results. Data dot results right and out here we'll do well if data dot results is greater than learned, then we just want to two will do total data and control us and then let's see what's going on here and out here. I can just type in some something. Okay, so uncut results Div is not defined. Yes. Again. Uh Oops, we're making a silly mistake because it's result Div and not results Div And then once again it's not total that it's totally to. So now keeping our fingers crossed, let's go ahead and try this with apple. A lot of fruit and uncalled results Dave is not defined. Okay, what is it? Results Div result. Div. Did I not change that result? Div and apple. Yeah. And we haven't worked on a function which basically allows the enter key on the keyboard to um work when we instead we have to like click on search. So anyways let's do that and there you go. So now I have all this string ified data in the results deaf and that means okay, we're getting back everything to do with apples. So we have apple cake here, we have apple crumble apple pie smoothie. Okay, that's fine. But let's just work on refining this a bit more because we need to uh we're going to display the data in a basically a nice way. Right, so what we're going to do now is I'm gonna comment this out and inside of here. I'm going to structure and if block um for loop. So let me just put a comment end of if I like the comments just so that I'm not making silly mistakes like you just saw like miss, you know, miss typing something. So let's just structure a four loop because we're going to be looping through each of those objects now and getting the title key than getting the image. Right? So what we need to do is for let we can use for let i is equal to zero and I is less than the total data dot length and then I plus plus. And what I want to do is I want to say, well, result div So remember it's not result positive, it's result div dot inner html and addition assignment. And I'm going to say, well Jason dot string if I and get me total data at index I and only get me the value of the title property. Okay? So what we're doing is that we're iterating through the search results and what we and those search results are basically objects, Right? And we only want to return the title of each object. So let's go ahead and take a look at this. And now if I go here and once again and then type in something maybe cake muffin, whatever and there you go. So you can see, I'm only getting my name's of the results. And what we can also do is I can come back here and just maybe append a break tag and then back to my webpage and then type in muffin search. Okay. There you go. So all of these are the certain recipes which are returned to us now. We're not actually going to be building the dome in this function. Just because when we're writing our code, we want everything to be nicely separated and not in just one giant function which can make it can make things unmanageable because like here you can see, well, you know, I've got this uh if and for inside of the then promise handler function. Right. And let me just end off then and all of this. Okay. So all of this stuff is inside the first if block that we constructed. And then we also have the else block. So just we want to maintain some separation of concerns. And what we're going to do out here is I'm going to say, well, we're going to basically we're not going to build the dome here so we can comment everything out here so I can comment this for loop. Right end of four. So comment this out. And now I'm going to say, well out here, total data is equal to the results a property of the data object. And once the data dot results length, if the data dot results dot length is greater than zero, that means that the results property which is equal to an array has more than zero items. So one or more then we want to work on a function which is called build dom. Right. So we've not ripped on this function, but we're gonna work on it in the next podcast. And what the build doM function will do is it's going to iterate through the total data array and it's going to assemble the web page with the image and title for each recipe. And basically, we need to keep that separate from the search function just because of, you know, maintain ability issues and everything shouldn't be in one giant search function. So that's all for this code cast. And in the next podcast, we are going to work on build on function.