Transcript

          
        
          Okay then.

          So now we know what callback functions are.
          
          I'd like to have a little look at one in action.
          
          So what I've done is I've gone to the index.html and I've already added this Ul with a class of people
          
          and in sandbox JS we have this constant people which is an array of different people.
          
          Now what I'd like to do is use for each to iterate through each one of these elements, each name,
          
          and for each one we're going to fire a callback function because we pass that through as a parameter
          
          or an argument to for each.
          
          So that function is going to generate some kind of HTML template for each one of these different elements
          
          and it's going to output that to the browser inside the Ul.
          
          Does that make sense?
          
          Okay.
          
          So then first of all, let's come down here and say people dot for each and what we're going to do is
          
          pass a callback function into this and we'll convert this into an arrow function later on.
          
          But for now, let's just take in the person.
          
          Each time around we fire this, which is the element that we're currently iterating over.
          
          So what I'd like to do now is create an HTML template for each one for each person.
          
          So I'm going to say up here outside of the for each method, let HTML equal to an empty template string.
          
          So backticks.
          
          Now inside here, what we're going to do is append to this HTML for each person.
          
          So I'm going to say HTML plus equals, which takes the current value of HTML and adds more to it.
          
          And what we're going to do is concatenate a bit of a template string.
          
          So I will do first of all, and this is going to have a style property set to color and we'll color
          
          these purple and then close that off.
          
          Then inside the Li, we want to output the person.
          
          So we'll do that right there.
          
          And then after the person we close the li tag.
          
          Okay, so what we're doing for each person is we're adding this snippet, this template onto the HTML.
          
          So each time around, each time we fire this callback function for each element, we're adding this
          
          onto the HTML.
          
          Okay, so by the end of it, the HTML is going to look like a big list of tags.
          
          So let me just log this to the console console dot log the HTML.
          
          Okay, So let's save this and view it in a browser and we can see this is the final HTML code.
          
          So we want to take this now, which is a series of li tags with the different names inside it and we
          
          want to output it to the browser.
          
          Now we've not covered any kind of browser interaction yet.
          
          We don't know how to do this kind of stuff.
          
          And I don't expect you to understand what I'm about to do.
          
          But the first step is to get a reference to an element on the page where we want the Ul.
          
          That's where we're going to inject our HTML.
          
          So I say Ul is equal to Document.queryselector and then I grab that Ul by using a CSS selector dot people
          
          that gets the people class.
          
          Okay.
          
          Again, I don't expect you to understand this much yet.
          
          We're going to cover this later.
          
          Then what I'm going to do is take that Ul because we stored it right here and I'm going to set the inner
          
          HTML property to be the HTML that we just created, which is this variable.
          
          So when we do that, it takes this HTML, it grabs this Ul and it places this HTML inside the Ul.
          
          Okay, So let me save that and preview.
          
          And now we can see all of this stuff right here.
          
          If I inspect that, then we can see inside the Ul we have all of these different Li tags.
          
          So that is just one use of this for each and a callback function to create some HTML templates for data.
          
          We're going to do much more of this stuff later on when we start to work with the Dom and the browser
          
          and this as well.
          
          So again, don't feel like you have to understand it all now.
          
          I just wanted to give you a quick example of how we could use for each and a callback function to good
          
          use.
          
          One last thing.
          
          I do just want to convert this into an arrow function.
          
          So let's take away the function keyword.
          
          We can take away the parentheses because we only have one parameter and we do our little arrow finally,
          
          and that is absolutely fine.
          
          We can leave it like that.
          
          So save it.
          
          Let's see if this still works.
          
          And it does.