<!DOCTYPE html>
<html>

  <head>
    <script data-require="jquery@*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script>
    <script src="script.js"></script>
  </head>

  <body>

    <h3>Sorted by last Name</h3>    
    <div id="sorted_last"></div>
    
    <h3>Sorted by last & first</h3>
    <div id="sorted_last_first"></div>
  </body>
</html>
// Code goes here
$(function() {
  
    // Quick method for showing the sorted results
    function renderSorted(selector, elements) {
      $.each(elements, function(ind, elem) {
        $(selector).append("<p>"+elem.l_name+" - "+elem.f_name+" ("+elem.title+")</p>")
      });
    };
  
    var people = [
      {
         "f_name":"john",
         "l_name":"doe",
         "sequence":"0",
         "title":"president",
         "url":"google.com",
         "color":"333333"
      },
      {
         "f_name":"alice",
         "l_name":"doe",
         "sequence":"0",
         "title":"vice-president",
         "url":"google.com",
         "color":"333333"
      },
      {
         "f_name":"michael",
         "l_name":"goodyear",
         "sequence":"0",
         "title":"general manager",
         "url":"google.com",
         "color":"333333"
      }
    ];
    
    
    renderSorted("#sorted_last",  _.sortBy(people, "l_name"))
    renderSorted("#sorted_last_first", _.sortBy(people, ["l_name", "f_name"]))
    
});
/* Styles go here */