Search from array of objects in javascript

hey there everyone they share from learn code online dot n and this video is brought to you by this amazing cute super awesome bottle just kidding just wanted to show you this bottle this is so amazing and so cute I picked it up today from the store just wanted to show you so anyways let's get started and the whole idea of how we are moving forward now let me tell you the strategy of that now as you'll be working with the JavaScript has a solution from front end to back end or complete set of chances are high that if you have something like node angular react or anything that you'll be handling a lot of ApS whether directly from your own personal server or maybe you are using API from other third-party services so the more you get friendly with these arrays and objects it's gonna be much more easier for you to handle all these api's and of course a lot of things comes in JSON and eventually will even be moving into the actual production environment something like learn code online you will be realizing that it's so much easier and fun to do all stuff with Jason okay so now what is the goal of this video in this video we want to launch a Trello version 4 which is gonna be a small Trello version you notice that in the entire series we have been making this fun Trello apps kind of a to-do apps and the goal is to introduce the searching feature in our app now yes I know my my app this Trello app is right now not having any kind of user interface or anything but that's gonna come up later on right now let's see how we can introduce this search functionality so let's go ahead and just create a new file Trello version 4 I hope everybody can does that no big deal so we're gonna have a simple might reduce let's just have my two dues and this my to do is is gonna have a few array objects and they can be all string as you know so we're gonna have something like buy bread and we're gonna have one more this is gonna be or something like go to gym which really happens nowadays it's happening quite often and record YouTube videos come on do that ok so this is our basic array and you obviously know that if you have read a little bit documentation that finding anything inside the array is pretty easy so what you can do you can simply log it and whatever you are looking for you can just simply say bye to dues and there are variety of features to which you can find out what you're looking for for example you can just simply say I want have an index off as soon as you put it it tells you that you can put a search element and it is going to return you the index of that element for example let's just say I'm looking for is buy bread and it's gonna return us the index of it so let's just run this and we're gonna say node Trello version for Jas and come on you can do that so we got a minus one again now why is that a minus one I'll come back and move on to this a little bit just deliberately wanted to do this mistake so that you can realize that how application should be shaped up okay so notice here that the B is in the capital one here but here I have deliberately returned that B as a smaller one so either if I change this as bread then I'm gonna get a proper index but if the particular element is not being found then you use a minus one so whenever you are taking and expecting an output from this index off make sure you handle the case of minus one again most of these things is already mentioned in the documentation as well I highly recommend to read that okay so this is all fun stuff no big deal and later on how we get the return of that we can actually just have this or we can see do something like this my two dues and we can wrap this up into this guy and now it's gonna directly give us instead of giving us the index value it's gonna just directly give us if that element is found it's gonna throw that in front of our screen because it's returning that value okay so let me undo that because it's much more easier there we go so this is all good and this is all fun stuff now let's move on to something which you will be handling pretty a lot so let's just say we are gonna have a simple array and in that array we will have a few constant few objects this is pretty common and if you look on to this random api's random person api's these are like filler API is just like lorem ipsum text for HTML these are ApS to play around and test a few stuff so there we go we are gonna create this object so we're gonna say new - duze new - deuce there we go and this new to do is is gonna be an array but array filled up with objects so let's just say we have our first object we got our second object and we got our third object still remember this array is an array and you can still use index off and all these things but you know in programming there is always a better approach of doing the things and solutions is always right but there can be a less optimized solution more optimized solution so don't worry if you don't get this at the first time but totally believe me okay so we're gonna have just like three ones now since this is an object I can introduce new features in my application like is done it can be true or false just like you see the check mark there almost like that so we're gonna give it something like title and this title is gonna be a string and I'm gonna use the same by bread I'm gonna use caps again because I want to show you a couple of more stuff and it's done is gonna be a boolean value so let's just say this is gonna be we're gonna start with false actually so there we go and just for housekeeping purpose I'm gonna put a comma if you don't put a comma here that's fine too but I like to so this is our first object then we go and we're gonna put our second object we're gonna have a title and this time the title is gonna be go to gym put a comma and we're gonna say is done that is gonna be false let's just assume this is a start of the day and again let's just have a title and this is gonna be something like record YouTube videos come on I can write that videos and it's done is gonna be let's just say true okay so I put a comma just for housekeeping purposes okay so that makes sense now we have new - dues so how we can look for anything in these kinds of - dues now although we have variety of options being available and let me just show you a couple of stuff here so gonna go onto google and we're gonna say array j s MDM all these best place to look out for the things that you're looking for so notice here we have a lot of options in here the one which we talked about is index off but you can see there are you can do even sorting shifting and all those fun stuff but let me show you what I'm looking for there is one find there is one find index so these are the most popular ones and if I just look at the find index one notice it returns the index otherwise its returns -1 obviously that's awesome but this documentation actually doesn't give you much of the idea how things are gonna be although it's pretty clear let me show you and walk you through how we can utilize these things ok so we're gonna be creating a simple fine to do function so that we can reuse that whenever we like so we're gonna go and utilize that okay so let me first walk you through that how this find index actually works so we're gonna call this Const index and this is gonna be a simple legend says near to do's and on this array we can just use this method which is fine index okay so it says you have to put some options here now basically what the whole idea is that this fine index can take a function as a parameter also known as callback functions so you can just and remember callback functions are just simple functions they don't have any name so if we're gonna call this as function put a pair of parentheses curly braces there we go it can take it now in this function you have to pass on to do as well as a kind of a title that you're looking for in this okay so let me just walk you through that what it takes now also let me remind you that we did use this for each loop remember that the for each loop is automatically gonna go onto each array and just takes that at a time so our first variable here is gonna be to do notice you can you can name it anything whatever you like it's kind of a variable name in here and it also has an access of index okay now this to do just like in the for each loop are moved on to each array this function find index also move on to each array and then it has also an access to this index okay so what you can do is you can return based on your search for example we're gonna return you have to look up for something as a title so we're gonna say that in here we are looking then to do dot title notice here we have this title we're gonna say when the title is go to gym okay so we are looking for this exact gas so we're gonna use equals to and in the codes I'm gonna give go to gym okay so what I'm saying here is that wine index actually moves on to every single array as soon as it's gonna find go to gym it's gonna return that and notice what we get in the return that's the interesting part so let me lock this and we're gonna have an index save that and open up our terminal and clean that up and have it so notice it gives me one so I can comment double line actually so that we can have a better approach and now clean this up and run that so notice it gives me one which is obvious so one more thing that everybody should be aware of that how this fine index actually works okay and in order to have a look how does it work we have to log every to do and this is a good thing about the fine index probably so let me run this notice now as soon as I use this fine to do it just printed out these elements as well so what it does it moves on to every single array and as soon as it founds whatever you are looking for notice we are looking for this go to gym title it just stops there and returns back that particular element okay I hope now the find index is pretty clear so now when it is much more clear we can just comment that out and based on our knowledge of the fine index we're going to create a function in which a user can pass on to do list like in this case new to dues and particular title which it is looking up for okay so what we're gonna do is we're gonna say Const and let's call this as find to do and this is gonna be a simple function pair of parentheses there we go function done so what we're expecting in this function that user should pass on is basically two things his to do and a title so we're gonna be saying something like my to do's and a title title and also notice I have commented all the about two lines of the array so that we don't get confusion of that so that's it okay so this is my function it's completely ready now what I have to do is based on this might reduce I have to use this knowledge which I just gained using the fine index and have to return this index okay so what we're gonna be doing is first of all let's just have a variable index okay and on the index notice I have absolutely no idea what the people are calling there are to-do lists here I have called this new to deuce but it can be any two deuce and if you get confused you can always write any here any tattoos in case it is confusing you I'm gonna go with the my to do it makes much more sense for me on the my to dues I'm gonna apply the method off of this find index and there we go make sure you use the capitalization correctly and this fine index expects a parameter to be passed on which is a function call back function so let's just write this function pair of parentheses and these guys okay now this function this particular function is dependent on this my to do this okay and on this my to do is it's gonna loop through every to do so what it has an access off is this to do as well as the index okay there we go and we are also gonna fix up one more thing if you remember from the very initial part of the video we did made a mess with this by bread okay this B was making a mess so we need to fix that up as well so what we're gonna do is we are gonna return what we are going to return we're gonna simply say to do dot title notice this to do has an access of all array objects we are looping through them we are accessing the title of it and we're going to convert - lower case there we go and done okay so now everything is in lower case and we're gonna compare it with the title this title which is being passed on by user and we're gonna say title and of course user can also pass it on and pretty much anything so we're gonna just use to lowercase here as well notice problem solved but a lot of people get confused at this point now notice I told you previously that function automatically as soon as it returns the value that's it function is over but notice this return is not for this function this return is for this function so we haven't actually technically returned anything we do have couple of options that how we want to do probably you want to do something like this return and return this value here so we we do have now off access of this so we can simply say something like this my two dues and we can have an index so it's gonna return the exact element that you're looking for in case you want to just return the index you know what to do just return the index okay so this is pretty good whatever we have learned so far using this find index so let's just use this now we are going to be using it with this new two deuce so notice when I say I have to actually get this new to do so new to dues and I can have an access of dot find to do it expects me to pass on not basically like that I have to actually log these values okay because right now this is being designed so that we can not just apply it directly on fine to do so what we are gonna do is store that first in two variables so let print me something like that and we are gonna now call this as simply find to do there we go it expects to parameter which is my not new to dues need to do is and also we need a title and this time we will be deliberately messing around with this go to gym and we will be messing around with the case sensitivity so go to gym the G is gonna be smaller 1t is gonna be camps notice we handled all of this in this lower case and simply just log this in to me just like that save that and let's open this up clean the screen and there we go so this time it has returned the exact title that we are looking up for go to gym regardless of the case sensitivity okay so this is fun and notice this is one way of dealing the things this is find index okay this is deliberately used when you only need an index but there is another option which can directly give you element itself as well so what we're gonna do is I'm gonna just comment this out I'm gonna say method one notice again in programming there are probably hundreds of ways doing that I'm just sharing a couple of them okay so let's just comment that out okay now we have explode this what is this find index let's go back and this is the one stuff that we have explored come on find index there is also an option of find which is comparatively easy but it's it's almost the same thing it expects a function to be passed on it's almost exactly same and I think we shouldn't be having much problem in understanding that if you have got this so let's just say we're gonna say Const and we're gonna say find to do and that is gonna be simply function pair of parentheses and there we go so this is now a function now what we have to do is we have to again we are following the same strategy that we want to create a simple function which is fine to do so that we can find on any element so what we are expecting in this function to be passed on again my two do's and a title okay exactly same what we are having here now let's just have a constant and we are gonna say title returned notice in the find index it returns your index but in just the find it returns you the exact element that you are looking for and there is no easy way it all depends on use case what you want to you really use so it's not like hey if we have fine why should we use fine no it's not like that it's always a use case scenario and there is a usage for everything that's why they are there okay so we're gonna say title returned and we are gonna simply say my two dues we're gonna use find on you find ask you to pass on callback functions so just use a function there we go and there we go okay so what it has an access once you apply a function of that it has the access of same thing it will look through every single element so to do and it has also an access of index yes it has okay so what you can do you can directly use a return here and you can simply say to do dot title dot lowercase not lowercase to lowercase to lower case we are going to lowercase that and we're gonna match it up with this title okay we're gonna say title dot to lowercase there we go again we have done exactly the same thing and notice a thing which a lot of you get confused this return is for this function not for this function so technically we haven't returned anything and now we can we have two options actually we can use return title returned either go with this way or you can just use directly return here totally how you really want to deal up with that okay we are not talking about much of the optimization stuff here so there we go and what we'll be doing is we'll be copying these lines paste them here and let me remove that and this one as well so again we need to pass on anything what you like and previously we were printing just print me it was also guess getting us exact title because we were using this my two do's and then index using square bracket notation here we don't need to do any kind of that fancy stuff okay so let's just run this control this and clean the screen and there we go he made a mess where did we fumbled upon okay to do that title too over case so yeah it looks like we made a mess to do the title to lower case and we used an equal sign what is that come on Vivi you should not be doing that kind of mistake you know sometimes it's hard to teach and talk and write the codes same time anyways there we go we have got this again always remember don't be shy if your code is not working debugging is the process of writing code don't be afraid chill out relax and you're gonna solve that out so there we go regardless of the case sensitivity we have done that so I know this video is over 24 24 minutes long but we have learned some crucial stuff about how things get in progress and as I said as we will be moving progressively into the further of this stuff it will become a little bit complex but I'll make sure that it becomes easy so these are method 1 and this is gonna be method 2 there we go so good cool stuff that you have learned in this video already the video is quite long and let's just keep it short right now here and let's catch up in the next video [Music]

Channel: Hitesh Choudhary

Views: 102,775

Rating: 4.7249284 out of 5

Keywords: Programming, LearnCodeOnline, javascript, javascript tutorials, javasc, advance javascript

Id: US63Q6AL0GI

Length: 21min 11sec (1271 seconds)

Published: Sat Apr 21 2018