<!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/>&nbsp;&nbsp;{').replace(/]/g, '<br/>]')
  }
  
  $("#unsorted-array").html(toString(array));
  $("#sorted-array").html(toString(sortedArray));
});
/* Styles go here */