<!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 */