- Use `for in` to Loop Through an Object's Properties 4:31
- Loop Through an Object's Properties 2 objectives
- Useful JavaScript Object Methods
- Store Objects in Arrays 3:45
- Create an Array of Objects 2 objectives
- Build an Object Challenge 1:17
- Build an Object Challenge – One Solution 3:09
- Display an Array of Objects on the Page – One Solution 7:14
- Review `for in` and Arrays of Objects 6 questions
Preview
Video Player
00:00
00:00
Store Objects in Arrays
3:45Arrays let you group values to build complex data structures. With an array, you store a collection of elements you can access by their position (or index). Objects take that concept further by providing a way to structure related data that's easy to read and retrieve using key/value pairs. It's common to combine the two by creating an array of objects.
Arrays are really useful,
0:00
because they let you group values to
build more complex data structures.
0:02
They're an easy way to store
a collection of elements you can
0:05
access by their position or index.
0:08
Objects take that concept further by
providing a way to structure related
0:11
data that's easy to read and
retrieve using key value pairs.
0:16
It's common to combine the two
by making an array of objects.
0:20
For example,
0:24
let's look at a quiz program you worked on
in a previous course on JavaScript arrays.
0:25
Open the file array-of-objects.js,
and as usual update the script tag and
0:29
index.html so that the source attribute
points to js/array-of-objects.js.
0:35
Remember, you created a multidimensional
array to store quiz questions.
0:44
Each element in the outer questions array
is another array composed of two elements,
0:49
the question and the answer.
0:54
This works, but
0:56
at first glance it's not immediately clear
what these pieces of information mean.
0:57
Another developer looking at this code
might have to spend a little extra time
1:02
figuring it out.
1:05
One of the best parts about using objects
1:07
is that they let you use distinct
names to identify individual items.
1:09
This makes objects more efficient
to work with than arrays.
1:14
So let's convert this array of
arrays into an array of objects,
1:17
that way you can use property
names to identify the data.
1:22
Starting with the first array element,
I'll replace the square
1:26
brackets with curly braces and add a
property name and colon before each value.
1:30
First question, then answer.
1:39
I'll repeat the same steps for
the second element in this array.
1:44
Then replace these two
nested arrays with objects.
2:00
You can copy these objects from
the teacher's notes with this video.
2:04
I've converted each element
from an array to an object.
2:08
Now let's look at the code
inside the for loop,
2:12
where you access the question and answer.
2:14
You had to use two sets of square
brackets to access an element
2:17
inside a nested array.
2:21
You can simplify this code and make it
more readable by removing this second
2:22
index notation and
adding a property name like this.
2:27
I'll do the same for the answer.
2:32
Even though the two dimensional array
got the job done, developers typically
2:38
use this approach when using related
data that can be defined by a set of
2:43
characteristics or properties, for
example a quiz question and its answer.
2:47
This code is easier to understand too, for
2:53
instance here we're
looping through the array.
2:55
Each time through the loop we
access one of the array elements,
2:59
an object, then we assign the value of
its question property to a variable.
3:03
And we do the same with
the answer property.
3:08
As you can see,
the program still works as expected.
3:12
Finally, even though I've typed
my objects over multiple lines,
3:19
you don't have to do it that way.
3:23
When your objects don't
have a lot of data in them,
3:25
it might be more readable to put
each object on a single line.
3:27
Here's an example of that.
3:32
Both work just fine, it's up to you
to write the code that's easier for
3:33
you to read.
3:37