title: Why doesn't my 'sort' function work? I cant find any errors I did
body: <p>I am toying around with objects in javascript to get a better grasp on my ability to use functions, and manipulate objects.  I have a program that 'builds' an Array of Objects.  Each of those 'objects' are a persons 'firstName' 'middleName' and 'lastName'.  I am trying to sort and output my array of objects alphabetically by First Name 'firstName'.  </p>
  
  <p>Later after I get this down, I will sort my Array by Middle Name, and then last Name.</p>
  
  <p>This is ideally what the function to be: (but it isn't working)
  I want to get it to work in this manner, so that I can sort my array in various ways: firstName, middleName, and lastName.</p>
  
  <pre><code>function fNameS(arr, prop) {
    arr.sort(function (a, b) {
      var nameA = a.prop.toLowerCase(),
          nameB = b.prop.toLowerCase();
      if (nameA &lt; nameB) { //sort string ascending
        return -1;
      }
      if (nameA &gt; nameB) {
        return 1;
      }
      return 0; //default return value (no sorting)
    });
  }
  
  fNameS(allInfo, 'firstName');
  </code></pre>
  
  <p>This is what my code currently is using: (and its not working either)</p>
  
  <pre><code>function fNameS(arr) {
    arr.sort(function (a, b) {
      var nameA = a.firstName.toLowerCase(),
          nameB = b.firstName.toLowerCase();
      if (nameA &lt; nameB) { //sort string ascending
        return -1;
      }
      if (nameA &gt; nameB) {
        return 1;
      }
      return 0; //default return value (no sorting)
    });
  }
  </code></pre>
  
  <p>Here is my JavaScript File:</p>
  
  <pre><code>var allInfo = []; //Store names (as objects) here
  var output = printList('output');
  var cache = [];
  var numOfNames = 0;
  var nameCounter = 0;
  var firstNameSorted = fNameS(allInfo);
  alert("JS Works");
  
  
  function buildList() { //Makes a new object, and pushes it to the 'allInfo' Array
    var info = {};
    info.firstName = document.getElementById('firstName').value;
    info.middleName = document.getElementById('middleName').value;
    info.lastName = document.getElementById('lastName').value;
    allInfo.push(info);
    addName(1);
    clear();
    alert("Logged");
  }
  
  
  function resetList() {
    allInfo = [];
    numOfNames = 0;
    nameCounter = 0;
    addName(0);
    blankOut();
  }
  
  function blankOut() {
    document.getElementById('output').innerHTML = " ";
  }
  
  
  function generate(list) { //print out list function/generate list.
    var counter = 1;
    var out = '&lt;ul&gt;';
    var i;
    for (i in list) {
      var rec = list[i];
  
      var row = [];
      for (var field in rec) {
        var fieldLabel;
        if (field === 'firstName') {
          fieldLabel = "First Name";
        } else if (field === 'middleName') {
          fieldLabel = "Middle Name";
        } else if (field === 'lastName') {
          fieldLabel = "Last Name";
        }
  
        row.push(fieldLabel + ': ' + rec[field]);
      }
  
      out += "&lt;li&gt;" + counter + ".) " + row.join('    | - - - |    ') + "&lt;/li&gt;";
      counter++;
    }
  
    out += "&lt;/ul&gt;"
    document.getElementById('output').innerHTML = out;
    return out;
  }
  
  //First Name Sort
  function fNameS(arr) {
    arr.sort(function (a, b) {
      var nameA = a.firstName.toLowerCase(),
          nameB = b.firstName.toLowerCase();
      if (nameA &lt; nameB) { //sort string ascending
        return -1;
      }
      if (nameA &gt; nameB) {
        return 1;
      }
      return 0; //default return value (no sorting)
    });
  }
  
  
  function addName(x) { //Name Counter Function
    if (x &gt; 0) {
      nameCounter++;
      numOfNames = nameCounter;
      document.getElementById('numOfNames').innerHTML = numOfNames;
    } else {
      nameCounter = 0;
      numOfNames = 0;
      document.getElementById('numOfNames').innerHTML = numOfNames;
    }
  }
  
  function printList(x) {
    var output = getById(x);
    return function (text) {
      output.innerHTML += text + '\n';
    };
  }
  
  
  function getById(x) {
    return document.getElementById(x);
  }
  
  
  function clear() {
    document.getElementById("firstName").value = "";
    document.getElementById("middleName").value = "";
    document.getElementById("lastName").value = "";
  }
  </code></pre>
  
  <p>Here is my HTML:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;Array Name Sorting&lt;/title&gt;
    &lt;link rel="stylesheet" href="css/main.css"&gt;
    &lt;script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="js/script.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;header&gt;
      &lt;h1&gt;Array Name Sorting&lt;/h1&gt;
      &lt;h2&gt;By: Jeff Ward&lt;/h2&gt;
    &lt;/header&gt;
    &lt;label&gt;First Name:
      &lt;input type='text' name='firstName' id='firstName' placeholder="First Name"&gt;
    &lt;/label&gt;
    &lt;br&gt;
    &lt;br&gt;
    &lt;label&gt;Middle Name:
      &lt;input type='text' name='middleName' id='middleName' placeholder="Middle Name"&gt;
    &lt;/label&gt;
    &lt;br&gt;
    &lt;br&gt;
    &lt;label&gt;Last Name:
      &lt;input type='text' name='lastName' id='lastName' placeholder="Last Name"&gt;
    &lt;/label&gt;
    &lt;br&gt;
    &lt;br&gt;
    &lt;button type="button" id="add" onclick="buildList()"&gt;Add to List&lt;/button&gt;
    &lt;button type="button" id="print" onclick="generate(allInfo)"&gt;Print&lt;/button&gt;
    &lt;button type="button" id="clearScreen" onclick="blankOut()"&gt;Clear Screen&lt;/button&gt;
    &lt;button type="button" id="reset" onclick="resetList()"&gt;Reset List&lt;/button&gt;
    &lt;br&gt;
    &lt;button type="button" id="sortFirst" onclick="generate(firstNameSorted)"&gt;Sort by First Name&lt;/button&gt;
    &lt;button type="button" id="sortMiddle" onclick=""&gt;Sort by Middle Name&lt;/button&gt;
    &lt;button type="button" id="sortLast" onclick=""&gt;Sort by Last Name&lt;/button&gt;
    &lt;button type="button" id="pickRandom" onclick=""&gt;Pick Random Name&lt;/button&gt;
    &lt;br&gt;
    &lt;br&gt;
    &lt;label&gt;Search:
      &lt;input type='text' name='search' id='search' placeholder="Search"&gt;
    &lt;/label&gt;
    &lt;br&gt;
    &lt;br&gt;
    &lt;label&gt;Number of Names in List:&lt;/label&gt;
    &lt;div id="numOfNames"&gt;&lt;/div&gt;
    &lt;br&gt;
    &lt;br&gt;
    &lt;br&gt;
    &lt;label&gt;Names in list&lt;/label&gt;
    &lt;div id="output"&gt;&lt;/div&gt;
  
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>What am I doing wrong in my sort function?  I have tried for hours to diagnose it and cannot find out what I am doing wrong.  I am a semi-noobie if you cant tell, but I am learning fast.</p>
  
  <p>Link to JSFiddle: <a href="https://jsfiddle.net/jeffward01/4zrzg4a1/" rel="nofollow">https://jsfiddle.net/jeffward01/4zrzg4a1/</a> </p>
  
  <p>This is not a duplicate because the code is not sorting. The other question (duplicate)(not by written by me) is HOW to sort.  Mine is to diagnose an issue.</p>