Javascript: For loop isn't working

Question

So I think there's something wrong with my for loop somewhere...

I have all the classes on a separate css file so I'm seeing everything on the DOM correctly on the front end.

My problem is that I need to make rows 1 and 3 have apply this class and I can get it work:

<i class="fa fa fa-trophy fa-4" aria-hidden="true">

In theory, I'm supposed to have a dynamic data table with 10 rows which are users in our app that came in first through tenth.

Rows 1-3: Are the users that came in first, second and third place... hence they get the "fa-trophy" class.

Rows 4-10: Are the remaining users hence they get the "fa-user-circle-o" class.

What am I doing wrong?

Javascript:

for(var i = 0; i < data.leaderboards.length; i++){

        row = $('<div class="leaderboard-row">');
        row.append('<div class="user-circle"><i class="fa fa-user-circle-o fa-4" aria-hidden="true">' + '</i></div>');
        row.append('<div class="leaderboard-col col1">' + (i + 1) + '</div>');
        row.append('<div class="leaderboard-col col2"><span class="truncate">' + data.leaderboards[i].username + '</span></div>');
        row.append('<div class="leaderboard-col col3"><span class="truncate">' + data.leaderboards[i].win_amount.formatMoney(0, '.', ',') + '</span></div>');

        if(data.leaderboards[i].level_unlocked > _currLevel){
            row.append('<div class="leaderboard-col col4">Won Playing ' + data.leaderboards[i].game_name + '</div>');
        }
        else{
            row.append('<div class="leaderboard-col col4">Won Playing <a href="/game/' + data.leaderboards[i].game_slug + '">' + data.leaderboards[i].game_name + '</a></div>');
        }
        _table.append(row);
    }

@Natsathorn I don't have my machine with the exact answer at the moment but "data" is hitting the backend and grabbing info from the " .leaderboards" database. We have this connected Django if that helps. — spidey677
– spidey677, Commented Jul 6, 2017 at 3:50

maazadeeb · Accepted Answer · 2017-07-06 03:49:51Z

2

Why don't you assign the fa-trophy class when i <= 2 ? Something like

if (i <= 2) {
    // assign fa-trophy class for the first 3 places
    row.append('<div class="user-circle"><i class="fa fa-trophy fa-4" aria-hidden="true">' + '</i></div>');
} else {
    // do something else with 4th place onwards
    row.append('<div class="user-circle"><i class="fa fa-user-circle-o fa-4" aria-hidden="true">' + '</i></div>');
}

answered Jul 6, 2017 at 3:49

maazadeeb

6,1122 gold badges32 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

spidey677 Over a year ago

Holy crap! That should work! Will rows 4-10 populate correctly?

maazadeeb Over a year ago

Yes. This will work for rows 4-n, where n is data.leaderboards.length.

spidey677 Over a year ago

What if I want to give row 2 a different class name as well? So in theory any users coming in second place receive a bronze medal which would be a different "i class"?

maazadeeb Over a year ago

You have access to the indices in the for loop. So you can choose to do whatever you like with whichever index you choose. In your case, maybe you can check i === 2 and do something there. If you have too many such specific cases, I would suggest you create a function called getUserCircleClasses which accepts an integer and returns a string with all the classes you want to add. And use this string to assign the i tag class.

spidey677 Over a year ago

I'm at work and this worked perfectly. Thanks again!

|

Collectives™ on Stack Overflow

Javascript: For loop isn't working

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related