First up let's go ahead and make a new jQuery element. We're going to make a variable called ol. This is going to store a new element using jQuery. We're going to create an ordered list. We'll create that ol tag:
socket.on('updateUserList', function(users){
var ol = jQuery('<ol></ol>');
});
Now we need to iterate over every user doing something with that user, users.forEach is going to let us get that done. We're going to pass in our function and inside of that function we can add the individual user:
socket.on('updateUserList', function(users){
var ol = jQuery('<ol></ol>');
users.forEach(function () {
});
});
The argument for the function is the name, the user string, and all we're going to do is append something to our ordered list up above. That's going to be ol.append:
socket.on('updateUserList', function(users){
var ol = jQuery('<ol></ol>');
users.forEach(function () {
ol.append();
});
});
Now what exactly do we want to append? Well we want to append a list item, the list item is going to have a text property equal to the name and that's going to get everything rendering just right. We can use jQuery to create a new list item by opening and closing our list item tag. Then right after the closing parenthesis for jQuery we are going to call text so we can safely set the text property equal to the user's name:
socket.on('updateUserList', function(users){
var ol = jQuery('<ol></ol>');
users.forEach(function (user) {
ol.append(jQuery('<li></li>').text(user));
});
});
Now we have an updated list but it's not actually getting rendered to the screen, the last step is to render it by adding it to the DOM.