Get a Unique List of Objects in an Array of Object in JavaScript

[Music] recently i needed a way to ensure that my javascript array of objects does not contain a duplicate of objects based on an id key or a name now i saw some approaches that required a for loop but i also found something really interesting that i wanted to show you today now this came through from a few stack overflow links and i will show them in the link below and when we get started we will go through building a quick array of objects and if you want to skip that and just copy and paste that in and follow along i'll provide a link in the description below for you to do that okay so let's get started first with building our array of objects let's go with const and we'll go my array and open up our braces and hit enter here and then we will have in our first object we'll call that name and we have we'll call this one eva maybe and we'll say character and this one is ivandra extra points if you know the reference to this and the episode the number of episodes she's been in is 15 not 15. cool and let's just select all this add a comma here first and then we'll select all this control c and we'll go enter ctrl v and we'll just change update this again so another character is going to be alessa alessia i think and medina and her character name is nixie and she's also been 14 episodes and we'll do the same again and we'll hit enter and control v and our next character is kendall drury and he is the dm and he's being in 14 episodes 15 episodes sorry and so has alicia as well made a mistake there but they're updated now we'll go and hit enter and control v to paste and our next character is thomas twalfman twofen sorry and his character's name is andres and he's been in 14 episodes and just for this tutorial let's make a duplicate one and we'll call alessia in twice and our goal here is to remove the duplicate so you can see here i've got alessia here and then we've got alessi here and our coding goal is to remove one of these all right so we've got our characters in place let's get started with our code okay so let's call this let's unique object obj array equal and to get a unique array of objects so to remove one of these elastics out we are going to first create a new array and then we are going to go dot dot to create a spread syntax and here we are going to use new map and i'll explain how this works in a moment we'll just go through the simple process first if you just want to play along for this bit and then afterwards i'll go through explanation and show you how it works if you want to follow along okay next one is object so we'll say our object array which is this one here so the name is my object array so my there is there it's the first one just hit enter and we're going to map through this now so map and then in our map our parameter is going to be the item so just put item on its own or what i like to do is put it inside curly braces because otherwise i'll forget when i have multiple parameters and then we'll do a arrow function and what we want the map to return on each iteration is the first thing we want it to return is the item and remember the item is going to be one of these objects so each of these objects as it iterates through so then we can say item and we'll call it name because we know there's two of the same name here so we've got item and we'll go name and then our next array is going to be just the item so the just item here is going to be as it iterates through the whole object so the first part of this is going to be just the name so for example it's going to be alessia medina it's going to be thomas tolfman it's going to be kendall drewery and then in the first element of this array will be the entire item which will be this these each of these objects all right cool and then once all that's done we are going to just get the values hit values make sure it's on the left hand side of this last array because we're going to put all this inside this outer array here so values and we'll close that off here we'll hit enter and hopefully we've got it all and let's console log that log so you can see what's going on and unique and it should be this first one here now we'll just go to a terminal here and we'll go to node and our file name is files gonna be safe control save okay cool now let's put that on a new line but imagine it's a single line and let's try that again and you can see now that we've got the same array objects but this time it only has a unique array of objects here so the alicia medina that we had a duplicate of has been removed out so what we can do just to make sure we understand how this works is we can change this item to say episodes and we know that there's a couple of duplicate episodes here so let's just do that very quickly and say episodes and hit save and we'll just run our terminal again and now we can see that we only have two left because there was only two different episode lengths that these characters were in okay and just incidentally while we're looking at it here we can see thomas talfman had 14 episodes there's a 14 there and there's also eva divore or evie devore she had 14 but it didn't collect that one so caught the last one of thomas and we see alessia medina and you can see alessia medina here and then at the bottom and actually what's happening is it catches and inserts the last object not the first object so keep that in mind for your own processes okay so how does it all work let's have a look so i'll get rid of this console and we'll put in some testing code here okay so the first thing we might want to look at is this array map process just to see how that operates let's call this let test underscore unique object array and we'll just go map just so we know what we're doing and we'll say equals and we'll use our my object array map here so we're basically just going to take all this through to here and put it in so let's just copy that and that should all close out okay and let's console.log this one and see what sort of results we're going to get now so let's just copy this in here copy and we'll just put this in so we know what we're looking at and a comma and then let's save control s and then down the bottom here we will run map is a javascript method that allows you to iterate through each item in an array and modify that array in some manner so for us our modification is to in this example is we want to first create a second level array to make a 2d array so this is the first level here and if you look down here you can see the second levels this is another the zeroth second level array the first second level array the second second level array and so on okay and then we say we want it by episodes so the zeroth item in each of the second level of arrays is going to be the episode number like we have here and then we have the original object as our first argument so if i change this around to our original one to names or name hit save and we will rerun that and you can see a little bit more bloated version so here and you can see now the zeroth element in each one of these sub arrays is going to be the name and then the first element after that is going to be the object what we're going to do next is use that in a map object so let's have a look at this so don't get confused with the map method which works on an array and now we're going to use the map object and what the map object does is it stores key value pairs similar to an object however the map maintains the insertion order of the properties you'll see map objects often displayed like this so for example keys and then they'll have a little arrow like an arrow function symbol and then values something like this and you'll see that in your console if you log in so let's do an example like that so let's just grab this and what i'll do this time just to get rid of the clutter is i'll make use of this of this variable here and put it inside our map so you can see what's going on okay so let's re let's name this one let we'll keep them similar test and we'll say unique array and we'll say new map because that's what we're going to do i'll make a new map constructor hard to say constructor is more of an american term just say constructor without the or sound okay so next we type in new space map and then we'll put our braces in and we just want to put in this test unique object map that we've already mapped out here okay so let's do that test uh unique object array all right let's find the bottom here i'll click on him what happens with your new map you can have a look at a 2d 2d array like we created here and it will it can convert this into a map object with the first element in each iteration being the key so alyssa medina will be a key and then kendall drury will be a key and so on and so forth and then the second element in the each iteration will be the value so let's console log and see what it looks like so console.log and we'll just copy and paste this in copy paste ctrl s to save let's go down to our terminal drag this up a bit so you can see and we will run it okay and now you can see that if you have a look down in the console here you can see that it's identified as a map here and then within the map object and the object is obviously identified by the curly braces you can see this special map syntax here where this eva divore is a key for our object because these are objects it's like the highlander there can be only one so if eva dre has multiple keys then only one has to remain so it will iterate over each key and if it sees that same name again it will update it with the next iteration that's why it's the last one in the iteration that will be saved so for us that means our unless medina is only appears once here because there can only be one key now the problem we have here is that this is not displaying what we need we only need to display these objects here in our array without these keys so we need to get rid of these keys and that's our next process all right so let's move on and work on that okay so we can do a couple things we can get the key of each element in this map or we can get the values so the map object has a couple of methods that allow you to do it and let's just get the key so you can see it very clearly because the keys are very short they're just names so we'll say let and then test unique obj array there was a new i'll use that just for our example and we'll have we'll use this above so and then we'll just call the values so these turn into iterators and it allows us to iterate through each element here with their key and value pay and just to look at a list of values or keys we can type in keys to get our list of keys and we could console.log that and let's just grab this again copy and hit ctrl s to save let's go down and run it and now you can see that we have a map iterator with our list of all our keys and for example i could say next here and that will just get each one so eva devore and then let's hit save and we can go up hit enter and if i typed in comma and then copied and paste this this will get us the next person on our list control c and hit save and we'll do that again and you can see eva devore alessia medina and so on and so forth so using that next allows us to iterate through each one all right so keep that in the back of your mind because this sort of next iterator is something we'll be using in a moment to complete this process but first we've done the keys the keys were easier for me to show you how things iterate let's use our object this time so that's our values so i'll get rid of this console log and we'll just copy and paste this line 37 and let's change this to values and let's change this to values and let's just console log that so you know so you'll see a map iterator of all the values this time which will be each object so hit ctrl c and ctrl v to paste hit save and let's run and now you can see this map iterated down the bottom here in the console and then on each iteration it has each one of our objects cool so we're getting very close now keep in mind we've got our iterator here so what we can then use is our spread syntax to spread this out along a new array okay so let's just do that now so let's get rid of this console.log and let's call this let test unique object array and we'll underscore that mixing up a bit of underscore and camel case like a crazy person nor new map underscore uh values and then we'll underscore again as all right don't right i don't normally write my variables like this but it just makes it a bit clearer i think for you guys oh we didn't spell values very well that's okay cool so equals and this time we're just going to use simply our spread operator on this so let's give that a crack so we want to put this inside a new array so we'll use our square braces and then we use our spread operator so dot dot okay and then we just want to copy this variable in and let's see what happens okay so that's console log and we'll work that in here pink copy paste save all right let's let's give this a run now and hit enter and there you have it now we have our array of objects and we now have a unique array of objects so with this example you can see that we've taken one of the properties in the object so for example we took the name property for each of the objects and then laid it back out so let's go back up into our list here laid it back out in to its own key so then we've got the eva divora key in a map object and then in the sec in the value we've got the entire object on each iteration okay so we did that by using the new map and then we just got the key values for each one and then we used our spread syntax to lay each one back into a new array and that makes our unique list of objects in an array performance wise it's not too bad it runs about it's 15 slower on a test than a you know for loop for example and you can find out a little bit more information about that in the written tutorial i have attached to this in the link below in the descriptions i hope you found this as interesting as i did i really learned a lot more about the new map object in this process and learnt a fun way of getting unique objects in an array by doing it i'll catch you another tutorial

Channel: Yagisanatode -Scott-

Views: 1,718

Rating: 4.8888888 out of 5

Keywords: JS, Vanilla Javascript, JavaScript

Id: 10CehsAWk7E

Length: 20min 35sec (1235 seconds)

Published: Fri Jul 02 2021