Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript Using jQuery Plugins Add a Sticky Navigation Bar Understanding Plugin Events

Caesar Bell
Caesar Bell
24,827 Points
Posted by Caesar Bell
Caesar Bell
24,827 Points

Creating the team divs with a for loop

Such "dry" programming is being pushed in my head, I am trying to look at way to code dry, and I notice for the team.html they are using the same code to create the divs so I am trying to use a for loop to create the divs. I got it to where it would print out the four team members, but now I need it to pull the four different images as well and the titles but that is what I am confused on. I try to use a nested for loop but the browser crashes trying to load my code i have below is as followed 

var teamMembers = ['Caesar', 'Matt', 'Joe', 'John']; 
var imgSrc = ['team--01.png', 'team--02.png', 'team--03.png', 'team--04.png']; 

    for (var i = 0; i < teamMembers.length; i++) {
        for (var k = 0; k < imgSrc.length; i++) {   
        }

        $('.team-member-list').append('<div class="grid-fourth">' 
                + '<img src=" img/team-members/ ' + imgSrc[k] + ' " ' + ' alt="" class="avatar" />'
                + '<h3>teamMembers[i]</h3>'
                + '<p>CEO</p>'
                + '</div>'); 
    };

Can somone point me in the right direciton on how to solve this.

1 Answer

Chad Donohue
Chad Donohue
5,657 Points

I think you have a misplaced right curly brace. You need your append code to be inside of the inner for loop. And your inner loop should increment k rather than i.

var teamMembers = ['Caesar', 'Matt', 'Joe', 'John']; 
var imgSrc = ['team--01.png', 'team--02.png', 'team--03.png', 'team--04.png']; 

for (var i = 0; i < teamMembers.length; i++) {
    for (var k = 0; k < imgSrc.length; k++) {   

      $('.team-member-list').append('<div class="grid-fourth">' 
            + '<img src=" img/team-members/ ' + imgSrc[k] + ' " ' + ' alt="" class="avatar" />'
            + '<h3>teamMembers[i]</h3>'
            + '<p>CEO</p>'
            + '</div>'); 
    }
}
Caesar Bell
Caesar Bell
24,827 Points
Caesar Bell
Caesar Bell
24,827 Points

Thank you sometimes a fresh pair of eyes works.

Caesar Bell
Caesar Bell
24,827 Points
Caesar Bell
Caesar Bell
24,827 Points

Now my issue is that it prints the same name four times across the row and prints out a total of 8 team members instead of just four.

Chad Donohue
Chad Donohue
5,657 Points

My fault, here is what you're looking for...

var teamMembers = [
  {
    name: 'Caesar',
    image: 'team--01.png'
  },
  {
    name: 'Matt',
    image: 'team--02.png'
  },
  {
    name: 'Joe',
    image: 'team--03.png'
  },
  {
    name: 'John',
    image: 'team--04.png'
  },
];

var teamMembersHtml = '';

for (var i = 0, len = teamMembers.length; i < len; i++) {
  teamMembersHtml += '<div class="grid-fourth">' 
            + '<img src=" img/team-members/ ' + teamMembers[i].image + ' " ' + ' alt="" class="avatar" />'
            + '<h3>' + teamMembers[i].name + '</h3>'
            + '<p>CEO</p>'
            + '</div>'
}

$('.team-member-list').append(teamMembersHtml);