Log in from a computer to take this course

You'll need to log in from a computer to start Building Interactive JavaScript Websites. But you can practice or keep up your coding streak with the Codecademy Go app. Download the app to get started.

apple storegoogle store
Learn

Using {{this}} also gives you access to the properties of the element being iterated over.

For instance, if you’re using the following array inside the context object:

const context = { someArray: [ {shape: 'Triangle'}, {shape: 'Circle'}, {shape: 'Square'} ] }

And your template looks like:

{{#each someArray}} <p>The current shape is: {{this.shape}}!</p> {{/each}}

After going through the steps of compiling, the finished HTML will look like:

<p>The current shape is: Triangle!</p> <p>The current shape is: Circle!</p> <p>The current shape is: Square!</p>

This exercise will provide additional practice using the {{each}} block and accessing properties using {{this}}.

Instructions

1.

In index.html, in the <script> element with an id of languagesTemp, add an {{each}} helper block. Use {{#each}} to start the block and {{/each}} to end the block. Then in the starting expression, add an argument of languages.

2.

Inside the {{each}} block, add a <div> element with a class attribute of "card". Inside the <div> element, add a <p> element with the text: I should learn {{this.name}}..

After compiling, for each iteration of elements, {{this.name}} will be replaced with a value.

3.

Navigate to main.js. In the context object, add a languages property and set its value to an empty array.

4.

Populate the languages array with 3 objects. Each object will have a name property. The values for the name are: 'HTML', 'CSS', 'JavaScript'.

Sign up to start coding

Mini Info Outline Icon
By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.

Or sign up using:

Already have an account?