JavaScript Array Methods You Should Know | JSON | Object Arrays

right so um at one point or another you have probably come across some type of json data um in your application and in this tutorial i'm going to take you guys through a small set of javascript array methods that you can use to handle the creation updating and the sort of general looping through your arrays that contain objects i.e your json data this tutorial is linked to a fantastic article on free code cam which will be linked down in the description and is part of a larger github repo that you can find on my github which is a sort of javascript cheat sheet kind of thing for you guys to use and contribute to if you want so yeah we have just got a subset of these array methods um i've put a link down in the description as well for the w3 page that has a more comprehensive list of these javascript array methods which you can check out as well um but other than that um let's jump in and get started we are going to start off um with an example of an array of cars so you can see we have an array of objects called cars that's the array with these little square brackets inside there we have different cars which are represented as an object with different attributes so the first object we have a purple minivan that was registered on this date and it has a capacity of seven people then the next car is a red station wagon registered on the state with a capacity of five so you can create any object that you like and you can put them in an array you don't have to use cars whatever example you're working with and you can use that in this example as we as we sort of go through so now if we had to go ahead and just console.table our cars array and save that you can see we have two car objects represented by uh represented at zero and one index a purple minivan and a red station wagon so let's go ahead and start manipulating the data so the first array method we're going to use is something called unshift and all unshift is going to do is it's going to add an object at the beginning of our array so let's go ahead and take another object and we'll call it car one and it's a red sedan registered on this date with a capacity of five all we're going to do is we're going to take our cars array and we're going to call and shift like that and we're going to put in car 1 and if we console table oops cars again you're going to see that where we started we now have a red sedan inserted at index 0 at the beginning of the array now what we want to do is we want to add another object to the end of our array and to do that all we have to do is call array.push so let's go ahead and take a second car object called car 2. it's a brown suv registered at this state capacity of 5. all we're going to do is we're going to call our cars array and we're gonna call push adding in car number two and let's console.table whoops our cause array again and now you can see how brown suv is added at the end of the array so now we want to add a car object somewhere in the middle of our array or at a particular index and to do that we are going to use a method called splice now splice has three parameters that you need to consider the first one is the index where you want to add the object the second one is how many items you actually want to delete it's optional in this case we don't want to delete anything so we're going to put a zero and the third one the third parameter is the item or object that you want to add so if we take our car and call it car 3 it's a green hatchback all we're going to do is call cars dot splice and we want to put it at index 2 or let's put it at index 3. we don't want to delete anything so we put a 0 and we put in car 3 as our final item as it were so if we go ahead and console the table whoops console.table cars again you can see our green hatchback is at index three so now what we're going to do is we are going to start looping through our array that we've manipulated to find certain objects based on certain values or conditions and the first method we're going to use is something called find and we can find for example a red cast or a car that matches a color of red obviously this would just be one object or the first object in the array and to do that we are going to do something that looks like this we're going to call our cars array we're going to call the find method and within the find method we are going to pass in our arguments that we want so we need to say that we're looking for a single car as well we'll just call this particular parameter and note that i'm using a shorthand now which i think applies from es6 onwards so instead of writing out function and the longhand i'm just calling the shorthand arrow function here so we are going to say we want to find a car that matches the color whoops which is equal to red now what we're doing here is we're creating a variable and that variable is going to be allocated based on the find method that's running against our cars array and so we pass in a car attribute or parameter that we want to get out of it um and all we're saying is we want a car with the color so the attribute color that equals red and it's the this particular array method is going to find the first item we only have one but it should technically only find the first item in the array and if it succeeds we are just going to console log red car and you can see it's console logged the car here and the object is obviously has the color red it's just oops the color red it's a sedan the registration date is this and the capacity is five now what we want to do is we want to pass in a second condition using the same method and so let's say we want to call a red i don't know station wagon so all we're going to do is we're going to call the array we're going to call the find method and we're going to pass in our car and now we want the car color to equal red and we want the car type to equal station wagon and if i just move back across here so just like we did before all we're doing is we're passing in the car color red and we're also passing in the cart type as a second argument so what should happen is if we console.log red station wagon we should get the exact same object a red station wagon with a capacity of five color red et cetera et cetera et cetera and so that the this particular find method is how you can search through an array and just pull out the single object that you're looking for now what we want to do is instead of finding one single object we want to look for multiple objects that match a certain condition and to do that instead of find we're going to use the filter method so if we go ahead and say lit red cars so we're going to get we should technically get back two red cars because we have a red sedan and a red station wagon um we're going to say lit red cars equal cars calling the array dot whoops filter and we're going to pass in the car just like we did before for find and we're going to say car dot color equals red we'll save that now if we console.table because we should get back an array if we console the table red cars we should now see we get back a red sedan and a red station wagon and so filter is as easy as that to find a to find multiple items based on whatever criteria or conditions you pass in so now what we're going to do is we are going to transform the objects of our array using something called map and in the first example we are going to loop through all of the different cars in our array and based on the capacity we're going to return whether or not a car is considered small medium or large so to do that we are going to say lit sizes equal cars dot map and again we're using our shorthand here with the arrow functions so we're going to pass in car and we are going to run our conditional if statement here to determine what we return as we loop through so um at each iteration we need to check if car dot capacity is less than or equal to let's say less than or equal to 3 um we want to return small um then we want to say if cars oh sorry car dot capacity is i don't know less than or equal to five let's say that would be medium so we're going to return medium and if neither of those conditionals are met we're just going to return large because the vehicle would be considered large so all this is going to do is when we call the map function over the map method over our cars array it's going to take each iteration and put it in this car variable and it's going to say if the capacity is less than or equal to three return small which it'll add to our sizes array as it loops through and obviously if it's less than equal to five medium or return large because it's obviously larger so if we console the table the sizes what we should find is we have a the red sedan with a capacity of five medium the capacity of seven for the purple minivan large medium small et cetera et cetera now what we're going to do is we're going to use map again except now we're going to create a new array of objects based on the car's capacity and so to do that all we're going to do is we're going to say let cars properties for example equal cars.map and we're going to call the a car for each iteration and we're going to open up our function and what we're going to do here is we're going to say lit properties equal capacity and we'll just say this is the car dot capacity because obviously we're getting the capacity from each iteration we run through which is handled by this car object and then we're going to say size is equal to large and so all that's happening is um if the next set of conditionals is not met we are going to just pull back this properties this property object itself so all that's going to happen is we're going to add our two conditionals just like we did here except this return large is sort of happening up here and it'll obviously make sense now so we're going to say if car dot capacity is less than oops or equal to five properties dot size is equal to medium and the last conditional is car dot capacity and if that is less than or equal to three we're going to say properties dot size and it's going to equal small and after all of that we are going to return properties and so all that's happening is just like we returned an item that came back into our array as we looped through so as we iterated through everything we returned medium large medium etc etc based on our conditional lot our conditional logic up there what we're doing now is we returning an object so if we had no conditional logic here all we were doing all we'd be doing using the map function is as we run map over each iteration of our cars array all we're doing is creating a new object with two attributes one capacity pulling it in from a from the car's array and putting in a size of lodge and so if we did that we would get all each object that would be returned would be would look like this with the property size of large but what we're doing is we're saying give us this object create it as we run through each iteration but check the size and if the size is less than or equal to 5 change the size from large to medium and if it's less than or equal to 3 change the large to small and then return properties and it's returning that properties object as we run through each iteration in our cars array and it's creating a new object called cars properties so if we console table cars properties you can see we have a new array and in that array we have each individual object with a capacity which we set out over here and a size over here and it's it hits that conditional logic to determine whether or not it is medium medium large large medium medium etc etc and that's how you can that's just two simple examples of how you can use map the map method to create different arrays or objects based on a loop a simple loop through your your first set of json data now that we've looked at um creating new arrays and new objects based off our current array we're going to now look at adding a property to each object in our current array so not creating a new one but just adding a property to the current array that we have so to do that we are going to use something called four each and so all we're going to do is call cars our array for each and we are going to call our car and so just like we've done before we're going to say car dot size equals oops large and all we're doing is that's that's basically how we're going to start our conditional logic and just like we've done before we're going to say if the capacity is less than equal to five or less than or equal to three change the capacity as is so um the first thing is um a card a size attribute is going to be added to each object in our cars array and it's going to be set to large but if oops if car dot capacity is less than or equal to 5. car dot size is actually going to change to medium oops medium and if car dot capacity is less than or equal to 3 set our car size to small and so if we console.table our cars array you should now see that after originally we had it up to a up to capacity we've added a new attribute to each object and we've set it as the capacity or size and that's it's as easy as that to add a attribute to each of your objects and loop through it and even add some conditional logic in there right so now what we're going to do is we want to run through our array of car objects and we want to sort them and we want to sort them based on something like the capacity and to do that we are going to call the sort method which has its own sorting algorithm that we're going to use to determine what goes where and all it does is it evaluates and runs a comparison between two objects so object one and two and if object one is less than object two because we're doing this in an ascending order if object one capacity is less than object two's capacity they need to stay like that and so we pass in a positive value a positive one value if um object one's capacity is greater than objects two's object two's capacity we need to swap them around to do that we need to give the sorting algorithm a negative one but if the two are exactly the same so if one is car's capacity car number one's capacity is five and so is car number two's capacity we want to pass in a zero to keep them exactly where they are as well let's go ahead and do that so we're going to say lit sorted cars equal cause array dot sort and we're going to pass in we're going to let's say let's call it c1 and c2 which is going to represent the two objects that we compare the current object and also the other object it's comparing to and now we're going to run into our function so we're going to say if oops c1 capacity is less than c2's capacity we want to run our evaluation and return a positive one if it's true oops sorry we want to return a positive one if that evaluates to true if it evaluates to false we want to run a second comparison that says if they if the capacity is obviously car one is greater than car two swap them around and if that is false keep them as is and pass back a zero so um our first evaluation takes place here what happens if it's true if it's false we're again going to do the car 1 capacity and we're going to say if it's greater than car 2's capacity pass in a evaluated and if it's true pass in a negative one if it's false it means that they're the same the values are the same and so we pass in a zero and so it'll obviously keep them there and obviously if car one's capacity is greater than car twos swap them around because we've put in the negative one and obviously if car1's capacity is not greater than car two's capacity just parson a one if that evaluates to true so if we console oops console table sorted cars and we save we can now see that purple minivan has a capacity of seven so that sits at the top next is our red sedan red station wagon and brown suv all with fives and our green hatchback is lost with a capacity of three and it's as easy as that to sort and now finally what we're going to do is we're going to loop through our array and we're going to see if an item exists and what we're going to do is we're going to call two methods to determine that the first one is called sum and all that's going to do is it's going to say return true or false if a particular car with a particular attribute exists um and it checks if any of the items match that so it'll find the first one that matches and it'll save fine it exists pass it back as true and we know it it exists somewhere in our array and the next method we're going to call is every and again these are just two of many methods you can use but every determines that all items of an array match a certain condition and so for example we'll run through and say can all cars carry a minimum of four people and it should return false because i think we have one car that returns that has a capacity of three so it should return to false so let's jump into the first one which is the sum method and here we want to see if a um if there is a car that exists in the array that is has the color of let's say purple and is a minivan so we're gonna see if this exists so we're gonna say lit we'll say purple mini van exists and we're going to say cars dot sum and we're going to say we're going to obviously call our car item as we iterate through and we're going to pass in our two conditions and we're going to obviously declare or create our two conditions um i'm going to say card.color equal to whoops purple oh if i could just spell purple and car.type is equal to minivan minivan and save that oh sorry i need to just add that so now we are going to let's say console log um do any purple minivans exist in the array and we'll say oh is my daughter symbol um purple minivan exists so this should come back with true so if we save we can see do any purple minivans exist in the array true yes they do and you can obviously add your own logic on top of this so now let's um jump so now let's see if um using the every method determine if every single car meets the certain criteria so we'll say let can all cars carry at least four people perfect so again just naming our variables as is to make it as easy to understand as possible which is the best practice in javascript so cars.every oops cars.every and we're going to create our car oops and calling our function um we're going to say and the condition we're going to pass in is car dot capacity is greater than or equal to four so all that's saying is as it runs through each iteration it's going to say does the car object does its capacity is its capacity greater than or equal to four and it'll run through it if it hits something that can't it's going to immediately if it hits something for example where the green hatchback has a capacity of three it's going to immediately return a false and we're going to know well that it obviously not all cars can carry at least four people so we are going to console.log can all cars in the array carry at least four people and we're gonna return can all cars carry at least four people so can all cars in the array carry at least four people no they can't because the green hatchback can only carry three and that's it it's as easy as that to use to determine whether or not an array contains something that matches the criteria or if every single item matches a certain criteria right so that covers all the javascript array methods that i think can be really useful when you're running with your json data in your application there are obviously a whole bunch more um that will be that the link to that list on the w3 website will be linked down below i've also put a link to the free codecab article in the description that lets you follow along with this um as well so yeah um i hope this i hope these different methods will help you out they were written with the es6 syntax so if you're not familiar with that error functions and and that sort of thing that's worth reading up on as well but otherwise yeah um if you guys liked the video please don't forget to hit that like and subscribe button and as always thanks for watching

Channel: Code With Brandon

Views: 3,108

Keywords: sap, abap, SAPui5, sap cloud platform, javascript

Id: kMVMxyp0KVo

Length: 33min 18sec (1998 seconds)

Published: Tue Dec 29 2020