Preview
Video Player
00:00
00:00
Loop Through an Array
6:04Use the for loop to iterate over an array of song names and display them on a web page.
Let's use the for
loop to work with an array.
0:00
We'll take an array of song names and
display them on a web page, like this.
0:03
I'll open the Elements panel
in Chrome DevTools, and
0:07
you can see that there's
an ordered list of song names.
0:10
Each of these list items
is one item in an array.
0:14
Now let's write a program
that generates this list
0:17
by running through the array
one item at a time.
0:20
To code along with me,
open the file playlist-1.js, and
0:23
in index.html, update the script tag
source attribute to js/playlist-1.js.
0:29
This file has an array named playlist
containing several song names.
0:37
In this file, I'll start by writing
a function named createListItems.
0:42
Its job will be to take
an array of elements and
0:49
place each inside a list item.
0:51
The function needs to accept
an array as an argument
0:54
which it will use to create the list.
0:58
In the function definition,
add a parameter named arr for array.
1:00
Remember, a parameter's like a variable
that holds a value passed to the function.
1:04
The array passed to this function will
get assigned to the arr parameter.
1:09
The function should build up an HTML
string that looks similar to this.
1:13
In other words, it needs to return
list items that can be displayed
1:18
inside an ordered list.
1:21
Inside the function,
I'll declare a variable named
1:25
items to hold the list items and
initialize it to an empty string.
1:28
With this items variable, I can build and
1:32
store the entire string before returning
it and displaying it on the page.
1:35
The next step is to add a for
1:41
loop that iterates through the elements
in the array passed to this function.
1:43
I'll initialize a counter
variable named i = 0,
1:49
then add a test condition
with i < arr.length.
1:55
Again, this condition checks that
i is less than the total number of
2:00
elements inside the array
passed to this function.
2:04
In other words,
the array assigned to this arr parameter.
2:09
Once i is no longer less
than the array's length,
2:12
there are no more elements to
loop through, so the loop ends.
2:15
Finally, I'll increase the value of
i by one after each loop iteration
2:20
with i++.
2:25
Next, I'll create the HTML list items.
2:29
I can do that by building on to or
2:32
adding to the current value
of the items variable.
2:35
Within the loop, I'll use
the addition assignment operator and
2:38
a template literal to add a set of li tags
2:42
displaying the element from the array
at the current index position.
2:46
Remember, the i variable holds
the current index value.
2:50
Inside the li tags, I'll use string
interpolation with dollar sign,
2:55
curly braces to insert the element at
the index that matches the i variable.
3:00
Now I have a loop that runs as many times
3:07
as there are elements in the array
assigned to the arr parameter.
3:10
Finally, the createListItems function
3:16
needs to return the value
assigned to the items variable.
3:19
You've learned that a function doesn't
actually do anything until it's called or
3:25
invoked.
3:29
So I'll first test the function in
the browser's JavaScript console by
3:30
calling createListItems and
passing it the playlist array.
3:34
And there's the full string
holding the six list items.
3:41
Notice how each playlist element is
inside its own set of li tags, great!
3:44
Now, let's display the list items on
the page within an HTML ordered list.
3:52
There are several ways you might do this.
3:57
I'll use a familiar method,
document.querySelector.
4:00
This should select the main
element in index.html.
4:04
Then to display the HTML inside main,
I'll use the innerHTML property.
4:09
I'll set the property to a template
literal to build the final string.
4:15
Now I can use the createListItems function
to display each item between ol tags.
4:19
These values will be dynamically
inserted into the final string, so
4:28
I need to use interpolation or
the dollar sign, curly braces syntax here.
4:32
Inside the curly braces,
I'll call the createListItems function and
4:37
pass it the playlist array.
4:42
Finally, in index.html,
just outside the main element,
4:44
I'll add a heading to this page
that says My Music Playlist.
4:48
All right, let's test it in the browser.
4:55
I'll save the file, refresh the page,
and there's our music playlist.
4:57
Now, any updates you make
to the playlist array,
5:05
like adding a new song, for
example, will appear on the page.
5:08
Working with each element in an array or
5:18
iterating through an array is one of
the most common uses of a for loop.
5:21
You can use arrays and
loops together in many ways.
5:27
For example,
say you had an array of scores.
5:29
To find the average of the scores,
you could use a for
5:32
loop to access each number in the array
and add it to an ongoing total.
5:35
Then when the loop's done, divide
the total by the length of the array.
5:39
Check out an example I wrote in
the teacher's notes with this video.
5:43
And keep in mind that there
are other more compact ways of
5:46
iterating through arrays using special
iteration methods you'll learn about later
5:49
in your JavaScript learning journey.
5:54
Learning how to use for
loops with arrays now
5:55
will set you up to better understand the
mechanics of how the other methods work.
5:59