(upbeat music)
- [Instructor] Alright, now let me show you
how I solved the Build an Advanced Function challenge.
You'll find my entire solution
in the exercise files for this movies.
You can go through the code and see exactly how it works.
I'll walk you through it step by step here.
The key to this entire solution lies in understanding
this file here, data.js.
As I explained in the setup to the challenge,
here we defined two objects,
first one called everyday backpack,
and then one called frogpack
and we placed them both inside a backpack object array.
What happens now is we get this array
that has two separate objects,
and we can map or for each through that array.
That arrays exported down here, backpackObjectArray.
And then in script.js
we start by importing backpack object array.
So in the previous examples
we've been importing the backpack class
and then creating the objects inside script.js,
here the objects are already created
and we instead get this array.
The reason why I set up this example is
when you start working with data from other sources,
let's say you're using a CMS
or you have some other data source
that feeds out JSON or something else.
You're likely going to get an array
of objects they need to map through
from another data source.
And you start out by importing that array in some way
and then doing some sort of iteration on it
to map through each item and then doing something with it.
That's what we're going to do here.
So once I have the backpack object array
I set up a new constant called content
and the content constant will be its own array
but it'll have the articles for each of these backpacks
instead of just the array of objects.
Inside content I grab a backpack, object array
and I used the map method.
You remember map allows us to step through each
of the items of the array
and then return the finished item back into a new variable
and a new array, which is what this content will become.
So inside the map object each of the items becomes backpack.
So we first take the first object, iterate through it,
do something, return it back into content.
Then take the second item, iterate through it
return it back to content
and so on until we're done with the whole array.
So now backpack holds the single backpack object.
Alright, then we can go in and do what we've done before
we you first create a new let call backpack article,
use document create element to create the article
and then we have append the class to that article.
Then because we will have several different backpacks.
We should have a identifiable ID on each of the backpack
so that they are unique.
I do that by grabbing backpack article
and using set attribute.
Then I set the ID attribute to backpack ID.
You'll notice here in the setup
that each of the backpack items has an ID at the top.
This is pack02, this pack01.
Now that the backpack article element is set up
we can populate it with content.
So here we have backpack article in our HTML.
This is the same inner HTML template literal
we've used before.
The only thing that's changed is
we are now targeting backpack.
So this is the generic term for each backpack item
as we map through this array.
So each of the backpacks that come in
will just be called backpack.
And then we grab the image, the name,
the volume, color and so on.
We just capture all that information
just like we've done before.
And all that information ends up in the article.
And the article ends up in the array called content.
Then at the bottom,
we return backpack article into contents.
That means in content we'll now have two items in an array
and each of those items will be an article
with all of this content.
Then we do what we did before
const main, and just grab the main using the query selector.
And then we go into the content array this time.
So that's the one that has the two articles.
Then we say for each and each of them will be just backpack.
And then we grab main and append, just that backpack object.
Like I said, the reason for this challenges
this methodology of mapping through an array of objects
and then doing something with it, returning it
into another array and then listing
or foreaching through that array to output some content
is a fairly standard operation once we started working
with data from other sources with JavaScript.
Now that you see how it works, you can go through my code
look at everything and how it fits together
and try to see if it matches your solution.