<!DOCTYPE html>
<html>
<head>
<script data-require="lodash.js@*" data-semver="2.4.1" src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script>
<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="script.js"></script>
</head>
<body>
<h1>Lodash sort by multiple values</h1>
<p>unsorted array: </p>
<p id="unsorted-array"></p>
<p>array sorted by "int", then "str": </p>
<p id="sorted-array"></p>
</body>
</html>
$(document).ready(function(){
var
array = [
{int: 10, str: 'b'},
{int: 3, str: 'a'},
{int: 2, str: 'c'},
{int: 4, str: 'f'},
{int: 11, str: 'g'},
{int: 2, str: 'a'}
],
sortedArray = _.sortBy(array, function(item){
return [item.int, item.str];
});
function toString(arr){
return JSON.stringify(arr).replace(/\{/g, '<br/> {').replace(/]/g, '<br/>]')
}
$("#unsorted-array").html(toString(array));
$("#sorted-array").html(toString(sortedArray));
});
/* Styles go here */