Preview
Video Player
00:00
00:00
Create an Array of Objects
7:30Walk through the solution to the third project in this JS practice session and see how to create a JavaScript array of object literals.
In this final practice with
basic JavaScript objects,
0:00
I asked you to create an array of objects.
0:02
So let's start by creating an array,
let products = [ ].
0:05
I'm using the newer syntax to create
the variable, let instead of var.
0:11
Var works just as well, but check out the
teacher's notes if you want to understand
0:18
the difference between the two.
0:21
Remember, use square brackets
to create an array, and
0:24
use curly braces to create an object.
0:27
Now I'm gonna add an item to this array.
0:31
Because an object is a value just
like a string, number, or boolean,
0:35
you can add object literals to an array
to create an array of objects.
0:39
Just add an object inside
the square brackets like this.
0:44
Start with curly braces, and
then the key name and the value chair.
0:48
Inventory 5, and the unit_price 45.99.
0:53
So we've added one product, a chair.
0:57
There are 5 in stock and
it costs 45.99 each.
0:59
To add another item to an array, just
type a comma, followed by another value.
1:05
I'll add two more objects here.
1:09
The name will be table, inventory ten and
a unit price of 123.75.
1:16
The last product is a sofa.
1:21
There’s two in stock and
the unit price is 399.50, okay.
1:25
We have our array in place with three
different objects or three products in it.
1:31
Now that we have an array of objects,
1:39
let's create some functions
to work with that array.
1:40
First, a function that returns a list of
the names of all of the products called
1:42
function listProducts has one parameter,
prods.
1:47
That's the array of products that
gets passed into this function.
1:54
Because the function returns
a list of product names,
1:58
I'll start by creating an empty
array to store that list in,
2:03
let product_names = [].
2:09
It's empty now, but we'll add product
names as part of this function.
2:14
Next, I need to loop through the array
of products, looking at each object and
2:19
retrieving the name of each product.
2:23
There are many ways to loop
through an array in JavaScript.
2:25
I'll use a basic for loop.
2:28
Type for let i=0,
i less than prods.length, i+=1.
2:32
This creates a counter variable,
let i=0 creates a counter variable,
2:36
each time through the loop
it compares the value of i
2:44
to the link of the passed
in array of objects.
2:50
And exits as soon as that as equal
to the number of items in the array.
2:54
In other words, it runs the code
inside the loop the same number or
2:58
times there are array items.
3:00
In this example, I've got three objects,
so the loop will run three times.
3:03
To access the name
property of each object,
3:09
we first need to access that
object using array notation.
3:12
So prods, bracket i,
3:16
closed bracket, accesses the array
item that's at the i index.
3:19
In other words,
the first item in the array.
3:23
In this case, it's the chair object.
3:25
The second product is at index 1.
3:31
And the last product is at index 2.
3:33
As the loop runs,
the value of i increases.
3:35
Now to access the name properly,
just add the dot syntax and
3:39
the property you want to access,
in this case name.
3:44
I'm building an array of product names.
3:48
So I can use the array push
method to push the name onto
3:50
the end of the product names array.
3:53
To do that, I'll start by
typing product_names.push and
3:55
pass to the push method
the name of that product.
4:03
Finally, I'll just return that array.
4:11
Return product_names.
4:16
Let's see if this works,
by calling the function and
4:19
logging the result to the console.
4:23
I'll type console.log(
ListProducts(products); So
4:27
I'll call up a loose products function and
pass the products array to it, all right.
4:32
I'll save this file.
4:38
Open the console.
4:40
And type node 3_final_products.js.
4:41
And there's a list of all our products.
4:52
Excellent.
We have one last function to create.
4:53
The total value function will calculate
the total value of all the items in our
5:00
inventory.
5:04
It takes as an argument
an array of objects.
5:05
So I'll type function
totalvalue(prods) {}.
5:08
This is the basic
structure of our function.
5:17
We'll calculate the value and return it.
5:20
So I'll create a variable to
hold the calculations, and
5:23
then we'll use a loop just like
we did in the previous function.
5:26
So I'll take let inventory_value = 0.
5:31
That's the starting value.
5:33
Then I'll do a for (let i=0;
i-prods.length; i+=1), and braces.
5:36
Each time through the loop,
5:43
we'll add to the inventory_value variable
by multiplying the total number of
5:44
the current product in stock
by unit price of that product.
5:49
So, say we have five hats stocked and
each hat cost 10.
5:52
The total inventory value
of that product is 50.
5:55
So, I'll take the inventory
underscore value,
5:59
I'll add to it prods i inventory
times prods i unit price.
6:05
We loop through the array making that
same calculation for each product and
6:13
adding it to the inventory value variable.
6:17
Finally, we just returned that variable,
return inventory_value.
6:19
To finish off this project let's log
the results of calling that function.
6:26
I'll type console.log(,
and then call totalValue,
6:33
passing products as an argument.
6:38
I'll save the file.
6:41
Open the console.
6:44
Type node 3_final_products.js.
6:48
And there we have it, chair, table,
sofa, and the total value is $2,266.45.
6:53
If your project isn't working,
7:01
check your code against the code
pasted into the teachers net.
7:02
Pay close attention to
the items you may have missed.
7:06
Think about why you
might have missed them.
7:08
And if you need to, revisit the videos
from the loops arrays, an object's course
7:10
that can help clarify what you're not
quite yet understanding about objects.
7:14
Also, if you're stuck, it's often really
helpful to reach out to our community and
7:18
post a question to the forum.
7:22
We have lots of students
who are eager to help.
7:23
I hope you had fun with
this practice session and
7:26
fun working with JavaScript objects.
7:28