JavaScript Object Looping

Hey. In this lesson, we are going to be looking at JavaScript object looping. So we saw earlier that when we were working with arrays, we can get all those values out of the array. So we can do something similar with objects, although it’s a little bit more complex. So we’re going to get the values from an object, and we’re also going to get the property names from an object, listing all of them out into the console.

Let’s first create an object and of course, we can use const. So we’re creating an object, so this is just a regular typical object that we’re going to use, and we’re going to loop through all of the names and values that are contained within it. So let’s start out by doing a make, and how about we do car again. And I guess make should really be the maker of the car, and then model, and we’re going to use our favorite one that we’ve been using for and that’s Mustang and also set in a color, and this time we’ll do a blue and year we’ll be 2013.

So there is our object that we’ve created, and first, we want to get each property that’s contained within the object. So first, let’s console log the object into the console, so we can take a closer look at how it looks like. So we want to get make, model, color and a year. So those are all of the property names that we’ve got available within myObject object.

So going into a loop, we can use a for loop and getting the properties, we need to set a value of it, and then n, specifying the object that we want to use, and that’s the myObject that we just created. So we want to loop through them and reference in each one of the proper names as proc that way we can use the console log, and we can output proc into the console.

So we save that. You see that it’s got the make, color, and year all being output into the console nice and neatly. So another thing that we might want to do is we might want to get the values that are contained within those property names. So once again, very similar because we can loop through and we can get each one of the properties. We can also output the names and using the myObject. And we’re to use the bracket notation and then just simply drop the proc into the bracket notation, and this is going to give us those values that are associated with it.

You could also, of course, do this within the one loop. We don’t actually have to create two, so adding that in and saving it, and we can get rid of this one because they’re doing the same function, the property and then the value that’s associated with the property, so the property name and the value all being open in the console so that we can output the object values as well.

So let’s try that into the console. So there’s a number of different things that we can do and getting the objects, so specifying that this is an object so it creates an object wrapper, and we’re wrapping the values of that object, and then all we have to do is specify the object name. So we need to first create that wrapper in order to output all of the values that are contained within there. And you’re going to see that this way we’re actually converting those values into an array format.

So we can use this then in the same format as we had the array where we’re looping through those values. So you can set up a temporary variable and get the object values. This is going to create your array that you can then use. And then just as we saw before, you can use the for each of the array and then loop through each one of those items.

So this is another option that you have when you’re working with the data that’s contained within an object, so much as we saw before where we’ve got a value and then we’ve got an index that we wanted to output and make use of from the array, and we can console log them both out, so outputting the value and then outputting the index value into the console. So you’re going to see that now that’s been transformed into an array.

So we took our object, transformed it into an array, and then we used the array for each loop to loop through all of the values contained within that array. And then we were outputting the value and we’re also including the index, which oftentimes, mainly, you don’t need the index. You’re probably just looking for the values, but it’s there in case you do need it.

So go ahead and try this one out. Use the object that you created in the last lesson, and get all the property names. And then if you have the property names, that means that you can get the values that are associated with it, so you can output those values as well. And then also try the object wrapper where you’re getting all of the values of the object and constructing an array out of those values. And then you can loop through that array and do some of the array functions that we’ve covered in the earlier lesson.