Advanced Node.js Development

Rendering the updated People list

Now over inside chat.html we do have a place for that. It's the div tag with an id of users, which means that we can select it, jQuery, the selector is going to start with the hash sign(#) since we're selecting by ID, and we're selecting users, then we can go ahead and actually add the list. I'm going to set the html property equal to our ordered list, ol, as opposed to using append, we don't want to update a list, we want to completely wipe the list replacing it with the new version:

socket.on('updateUserList', function(users){
  var ol = jQuery('<ol></ol>');
    
  users.forEach(function (user) {
    ol.append(jQuery('<li></li>').text(user));
  });
    
  jQuery('#users').html(ol);
});

Now we can save chat.js and test things ...