JavaScript Array Looping – With and Without jQuery

I recently ran a training session with my team on how to loop through arrays. The initial concept was how do you build a function that can parse out an array, with the array and the function separate items (meaning you can drop in a different array and use the function as-is).

Here are our two arrays:


var colonies = ['Delaware','Pennsylvania','New Jersey', 'Georgia', 'Connecticut', 'Massachusetts', 'Maryland', 'South Carolina', 'New Hampshire', 'Virginia', 'New York', 'North Carolina', 'Rhode Island'];

var presidents = ['Washington, George', 'Adams, John', 'Jefferson, Thomas', 'Madison, James', 'Monroe, James', 'Adams, John Quincy', 'Jackson, Andrew', 'Van Buren, Martin', 'Harrison, William Henry', 'Tyler, John'];


Now, the exercise was to display the array in a numbered list, with alternating colors. I gave them the following CSS:


<!--The final HTML would look something like this:-->
<ol>
	<li class="odd">Delaware</li>
	<li class="even">Pennsylvania</li>
<!--and so on...--></ol>

Solution (Without jQuery)


<script>
var colonies = ['Delaware','Pennsylvania','New Jersey', 'Georgia', 'Connecticut', 'Massachusetts', 'Maryland', 'South Carolina', 'New Hampshire', 'Virginia', 'New York', 'North Carolina', 'Rhode Island'];

var presidents = ['Washington, George', 'Adams, John', 'Jefferson, Thomas', 'Madison, James', 'Monroe, James', 'Adams, John Quincy', 'Jackson, Andrew', 'Van Buren, Martin', 'Harrison, William Henry', 'Tyler, John'];

var arrayDisplay = function(arr, sorted){
   if(sorted) {
      arr.sort();
   }
   var htm = '<ul>';	
   for(i=0;i<arr.length;i++) {
      htm += '
	<li class="';
      if (i%2 == 0) {
         htm += 'even';
      } else {
       htm += 'odd';
      }
      htm += '">' + arr[i] + '</li>';
   }
   htm += '</ul>';
   document.write(htm);
}
</script>

The Thirteen Colonies

<script>
      arrayDisplay(colonies, false);   
</script>

The Presidents

<script>
      arrayDisplay(presidents, true);   
</script>

It works, but it’s not very tight.

Solution (With jQuery)


<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script><script>
var colonies = ['Delaware','Pennsylvania','New Jersey', 'Georgia', 'Connecticut', 'Massachusetts', 'Maryland', 'South Carolina', 'New Hampshire', 'Virginia', 'New York', 'North Carolina', 'Rhode Island'];

var presidents = ['Washington, George', 'Adams, John', 'Jefferson, Thomas', 'Madison, James', 'Monroe, James', 'Adams, John Quincy', 'Jackson, Andrew', 'Van Buren, Martin', 'Harrison, William Henry', 'Tyler, John'];

var arrayDisplay = function(arr, target, title, sorted){
   if(typeof sorted !== 'undefined' && sorted) {
      arr.sort();
   }
   var htm = '<h1>'+title+'</h1><ul>';	
   $.each(arr, function(i, val) {
      htm += '
	<li class="';
      if (i%2 == 0) {
         htm += 'even';
      } else {
         htm += 'odd';
      }
      htm += '">' + val + '</li>';
   });
   htm += '</ul>
';
   $(target).html(htm);
}
$(document).ready(function() {
arrayDisplay(colonies,'#colonies','The Thirteen Colonies', true);
arrayDisplay(presidents,'#presidents','The Presidents');
});
</script>

Notice how much tighter the code is and how we’ve added some features like dynamic titles and locations for where the content displays. Using this model, we can swap the colonies and presidents divs without touching the JavaScript.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.