Sorting Object Arrays in JavaScript

what is up everybody my name is Tyler Potter and welcome back to another video in this video we're going to be doing some actual functional stuff we're gonna be working with object well arrays of objects and then sorting that array of object by name so I can sort by name actually is gon Wonder Woman the flash Superman Nightwing it this is actually in descending order if we click again it goes to ascending order sewed for a to C or C to a we also have sought by meta so I kind of create like meta stuff which is like the suit color and as you can see we can sort by tin the name of the suit color so silver red and yellow red and blue green gold blue black and blue and black and also H as you see here will go in descending age if we click it again we get it in ascending age and that is kind of what we're gonna be working on today so let's move this over to the side let's align this up with this come on let's go there we go and let's create free file so the first file we want to create is index.html so as you can see here we've got a basic HTML file and I'm going to use Emmet which is a part of PS code by pressing exclamation mark tab to create boilerplate code if I continue on here you can see we've got the boilerplate code don't worry about this you should know already notice if you're already on to JavaScript in the title we're gonna name this object sorting and in the body we're gonna have literally a header in the head organizer h1 which this object sorting and if you guys watch my other videos you will know that this is the same structure I crave for every single page of creating simple header with simple h1 in it section in here so we're gonna create a new section called sort options and these are gonna be the buttons at the top so these buttons at the top here and in there we create a button times by well with a class of sort times by free and if we go back here we go say saw - named hello oh that what happened there let's also assume this a1 for you sort - name and in here we say sort by name I'm going for here and say sort - meta and we're gonna say sort by met so high for the Aged and there's going to be sort by age there we go that's part of a marker we now need the actual list so we say section dot list - headers so there's gonna be a list headers and we're gonna say dot header - title and it's just gonna be named we'll duplicate this and I'm gonna go into the name and change it to suit color and this bit here it's gonna be meta and did get one more time and this one is going to be aged and it's gonna be header age we don't go create one final section and give this the class off list so there's gonna be our actual list we don't need to anything kidding there that's all we need to do so this our markup we need to add in a link up here to a stylesheet so guess a link I'm gonna say main dot CSS because we're not worrying about folder structure right now this is simply just a how to sort some object arrays in the bottom here we're gonna create a script source and it's going to be called main dot J s so we're gonna pull through this script so let's create these files first off let's create main dot CSS and in let's straightaway create main KS nice so in the main CSS we'll create some reset Fowles I do this reset foul foul foul use and I'm gonna say margin zero because nobody likes marching by default add it myself come on guys we don't want padding either and also the savior of all layouts box-sizing so box-sizing border-box o makes it so your padding doesn't push out your container width instead it in sets to padding and pushes the content inwards which makes it a lot easier to calculate whips and stuff let's create font family and I'm going to use rowboat so it's installed on my machine so I'm not gonna pull it through by google fonts or anything because it's install my machine and I'm only using this for making it not a serif font and not an Arial or a Helvetica backgrounds could just be oh this should be a background color sorry I don't like using the long hand when I'm doing a shorthand syntax that makes I don't know if I make sense we're gonna right here header and we give this a width of 100 feet W and a height of 60 pixels willing to set the background color to a dark dark gray basically black Mars will just say black bits dark gray I need to have a sip a drink juicer G fuel where if you want to call it and let's say header h1 and we'll give this a color off every every free because a really subtle gray fairy cell like it pretty much is white okay if size 28 pixels fun way of 900 pixels and a line height off the same as the head height which is 60 pixels so right let's also give this the text align Center and a text decoration of our text sorry not to text transform off upper case that's transformed again wrong transform and if you wonder why separate my stuff here it's because I like to keep it clean I like to make sure things which relate to each other a split up so it's easier to read obviously i minify this in production so it doesn't cause any issues let's now target our main and I guess a list - watch II know we need to style to the options first so we want to say main dart and what was it saw options I think is sort options that is the one so we say main and we say dot sorts - options button I'm gonna give this a flex way why would I want Bob boom ain't even done the saw options yet let's say display flex everybody's favorite justify content space between give it a width of a hundred percent a max width though a 480 pixels because I've done it spanning too much and then a margin of 30 pixels photo so fake pixels top and bottom I'm gonna push it to the center but then guess a main those saw options button and we'll give this a flex of one one a hundred percent maybe nine hundred percent maybe what 33 percent that's I think that makes sense that's basis I don't know I'm not even sure if I'm doing that right background color it's gonna be FF c/e cero cero which is my favorite color yellow border:none outline and then padding of 15 pixels and a margin of ceará pixels 8 pixels so just so you know I'm doing all of this once we get to the border radius of 8 pixels sorry I'm doing this because I I'm going through this really quickly because I want to show you the styling because some people like to see it but the same time I want to get for it quickly you should probably skip further ahead if you want to see if you want me to start directly on the what's the face you call it on the JavaScript that's why I was saying and on the bone we also want cursor:pointer although it's a button so have cursor:pointer anyway I believe and now let's before we continue I need to see what I'm doing cuz I'm not sure if this even gonna work so in here I'm going to type live - surfer dot we're just gonna open me up a surfer that's an NPM package called live surfer and actually can see this what we've got so far so you've got these free buttons and we have this little name su su color and age nice so that's pretty much there let's quickly actually I'll get to a huff estate for this button but we don't need to do it doing so under here we need to now basically start our list header so say main dot list - headers we're a display flex just the five content space between will give it to actually tell you what we're actually going to use this code right here well just because that's literally what we're gonna write here but we want to set syrup I want to say Sarah pixels there cuz yeah we want it to be touching the the actual list padding of zero pixels 15 pixels font weight we're gonna say 700 and then text transform public upper case safe there we go now they're in position so I think that's fine right it looks fine let's now style our lifts will this a Maine dot list and it's going to be displayed block with a hundred percent max with 480 pixels margin:0 auto so yes I know I could have had it a container around this well I could have just might centered my main instead of doing which one represent max with 480 on I think but floors are made and I will weaken this is why we do this so we can learn from our mistakes and now we're gonna have a list item let's actually create a list item so in here I want to say dot list - item and then inside that list item I want a item title test 1 and item - meta and a it's it wow this is their age no I don't think we need well we do need to do it so it'll be item - age and in here we'll say 24 well actually we do my age 21 there we go there dataset so now let's go styler so list item will be display flex it's actually gonna be the exact same as this I believe but margin will be 15 pixels cero pixels padding will be 15 pixels all around this doesn't need a max width border of one pixel solid three one three one three one five one seven one seven one seven and then border radius pay pixel safe there we go so now it's it's kind of there right that looks fine that's good enough for styling let's remove this actual list item now Chris we're going to be creating this well we will be creating this in dynamically enjoy script I think that's called a styling we need good so let's go over to the JavaScript first thing I always like to do I like to console.log something just to see if it's working test us there dice let's actually dock this to the bottom for now just so we can see it and let's remove that now the first thing we want to get from our Dom so we need to pull out this list we need to get this list so we're going to reference it in Java chip so we'll go save the document dot query selector and we're going to get the list I'm gonna say Const sort name button console that's annoying sort meta button swords page button can I set these equal to document query or selector dot saw options start saw age I'm actually gonna do this didn't I'm gonna do this as Const because it's gonna really annoy me else and this one's gonna be document query selector dot sort - options sort - name this one will be document Oh miss Alma document dot query selector does saw options can you guess what this one's gonna be yeah you guessed it sort - metal that if I can even type so confident with that one as well okay so the first things we've done here is we've got our list item up here we've now got a reference to a bomb so if I just for reference my console dot log list hits safe you'll see it reference the list section up there which we created in our Dom just if you guys won't clear on that now - we're gonna need a list of items right so we need to create a list of people and I'm doing it superhero-themed d see because I don't know I shift and Martha it's the bigger one so yeah I paste in this lists items which is gonna have Batman whose matter which is suit color which is black age 57 because that's roughly how old he would be right now I think I'm just guessing and all this so these are just a few small people so the first things we need to do after doing that is we need to create a function which will display the list right so we need to create a function called display list or is a function display list and it's gonna take in an array which will have a backup of an empty array I'm going to say list dot inner HTML it's equal to nothing so we're gonna get this list up here and we're gonna we're going to make sure nothing is inside of it we're clearing out it's in HTML so we can add new things this means every time we render the page or we saw like by names or by Mayer it will clear the list for us so we don't have to keep manually doing a won't add it to the bottom we'll do a for loop it's going to be a basic for loop which is gonna check the oh my god if I can even type thus doesn't make sense array dot length so we're saying if I is equal to n is equal to 0 is less than the erase length I plus plus the simple for loop will say let I am equal to array item I which this index number and we're going to say let so now now we need to basically construct the each item and in here we say item element is equal to document dot create element and we're gonna say diff oh so I need to say let item element and then I'm gonna say item element dark classlist stop add and this one's going to be called a list I am well they ain't gonna say no we're not gonna repend it I was Vera pen to that to the list but we need to do everything else first we now want to get the title which gonna be document dot create element crate tree walk I don't know what is I heard Toyo classless not at I turn - right oh yeah my entire M is a title dot in a text is equal to item dot name so if you remember we're now getting it d om array which is this item we're gonna pass through it's not in passed through yet but we're gonna get item we're gonna get the list and we're set it tonight then we're going to loop through and so far we've gone to the title we've created a new title element and we're setting the content of text inside of this diff to be the item name which will be this in one of the cases now what I'll do that with a safe item element dot append child and we're gonna say title now if we wanted to we can now do that we can literally quit to check its work and we can say list dot append child I'm gonna say item element it's safe know it's gonna happen but we're gonna go down here and say display list I'm gonna pass through our list items hits safe and as you can see it's added in every single person with their names so again this is just displaying we need to do this so we can actually see what we're doing so let's quickly save the rest of all gonna say document or create element I'm gonna say diff meta class list or add I'm gonna say item - meta meta inner text that's it in HTML in a text is equal to item meta now let's duplicate this because we also actually we need say item element dot append child and we're gonna say meta now down here where we've got metal gonna rename this to its age it's an it age we're gonna say Oh God age age change both those at same time and age there okay nice that's looking right I think yes and we also want to get this again and say age hit save and there you go now we've got every single thing here although it's slightly off that doesn't make sense I think I need to flex one needs to yeah let's do that quickly - let's say main list dot list item diff MF child 1 and copy this put that a child 2 and say flex 1 safe there we go that's kind of them what about find the long as it's kind of their sore mass again this that's all we need for that so we've got our list now we need to create some function or dot functions we need to set some event listeners for our buttons up here so we've got sort name button so let's go down here and say sort name burned off add event listener and I'm gonna say click o'clock that's not offend listener come on Tyler and we use an arrow functions it's just quicker and I'm just gonna say in here let array so this go be our rate equal sort array by I'm gonna pass in our list items name so that's the that's the value you want to modify I'm gonna say disc which that stands for descending which we actually need to set up set up the top here before this we need say let this desk equal false because that what we're saying that means descending or ascending what's gonna say let click equal false just so we know where to flip the descending so in here we're gonna say if click if click descending is equal to true click is equal to false or clicks equal to not click mate does that make any sense I don't know maybe we should do this afterwards so if we just go here back there we remove that we remove that and we pull that back and I go display list and we'll go pass through that array which we're going to get back from this function we create sorry I'm just is equal to not desk and this sequel to not wait we don't forget click then oh look I've shortened my own code right so in this SWAT so let me explain why just an aside we've created descending value but every time we click a button we need to call array saw array by list items name desc and that sounds for a descending but then once we've displayed it we also want to flip the features that's true so it is displaying as descending for the next click if that makes sense just so I have time we click it flips the button round so let's create this function now so down or above the display was a function sort array by and it's gonna take in an array a sort option and if it's descending so we're gonna say array dot sort so this actually a function built into a race and we're gonna say function a and B so these are the two functions we'll compare all the two things we're going to be comparing so we just want to say if a with sort so it's going to get the stuff out so if we put a name it's actually gonna be the same it's doing this so we're gonna say if sort it's less fan be sort return minus one will go duplicate this and flip this round and then just say return one and then we're going to return 0 if none of those values here return true so basically we're checking to see if this returns so if a is smaller than B in the sense of if it whatever the saw is we're gonna return minus 1 which means it will go a will go behind B in the array if that makes sense oh god that's confusing it's a hard it's hard thing to understand but you know so we're gonna say if the sending of radar first so now this is where that descending comes in so when we pass through descending if it's equal to true so if we are just ending then we're going to say array dot refers and that means it's going to flip it round so it's descending so they erased the opposite way and that's the C's yes and then add a bomb here going to return the array so if we refresh here and we click sort by name and we click leaf way so you can see we've got Batman cyborg green arrow Nightwing Superman the flashing 1/1 which is correct correct if we flip it it's one woman - flash - but it's literally just the opposite way around now we need to set these up for two buttons and as you can tell they're going to be super easy we're just going to duplicate this piece of code here I know I could just create a function to do this with one piece of code we could just check the button and then half a day to fire you on it or saying but don't judge me all right and this one's got the H yeah so here we go sort by age here we're gonna sort by meta and I think that's it it's safe if we refresh how I click sort by man you can see it sorts like that now it's self if I sort by age it sorts by age if we flip it sorts the upper way round apparently sort by age and sort by oh boy it was the same it wasn't the same but that is how you sort a race of objects in JavaScript now this was quite a simple but I tried to go everything as best as possible so if you did learn sewing canoed and drop a thumbs up on the video guys if you want to see more simple videos with the basics on my channel then let me know because there's more we can do a lot more simple things we go down right to the basics and learn things step by step so you can actually understand everything we do in a more advanced videos than that guys I hope you enjoyed the video if you did leave thumbs up if you want to see more than hit a subscribe button and if you want to be the first person on this team to get that first comment in the first like an and to support me hit that notification about so you know as soon as the video goes up and lastly guys if you have any questions drop it in the comment section below I'm happy to answer it if you want to get more if you want me to be more responsive than jump over to my discord channel and join us there's a lot of cool people there to be an actor for the minute so I'm gonna go and chat to them all now and get all hyped up again so thanks for watching video guys peace-out always do it on my own so I gotta get through it and the only thing I know is to love what I'm doing never give up never slow till I finally prove it never listen to the nose I just wanna keep moving keep my head up when I head up that's a fact never looking back I'm gonna keep myself in check keep my head up staying strong always moving

Channel: Tyler Potts

Views: 7,097

Rating: 4.931818 out of 5

Keywords: SASS, SCSS, CSS, HTML, Tutorial, JavaScript, Vue, React, how to, code, website, app, application, framework, animations

Id: wf_QR5M4IV4

Length: 24min 53sec (1493 seconds)

Published: Wed Aug 28 2019