title: How to add to my JSON Object using a form
body: <p>I'm trying to figure out how to add my object from a form. Any ideas how I can add a new name and photo_url to the end of my object?</p>
  
  <p>Thanks,</p>
  
  <pre><code>  data = [
      {name: "Mark-Paul Gosselaar", photo_url: ""},
      {name: "Delta Burke", photo_url: "img/avatars/delta.png"},
      {name: "Alf", photo_url: "img/avatars/alf.png"},
      {name: "Jaleel White", photo_url: "img/avatars/jaleel.png"},
      {name: "Ralph Macchio", photo_url: "img/avatars/ralph.png"},
      {name: "Candace Cameron", photo_url: "img/avatars/candace.png"},
      {name: "Patrick Duffy", photo_url: "img/avatars/pduff.png"},
      {name: "Arnold Schwartzengger", photo_url: "img/avatars/arnold.png"}
  ];
  //MY CODE
  $(document).ready(function() {
      var employee = data;
      var directory = $("#directory");
      //SORT THROUGH THE JSON DATA AND REVERSE IT
      function reverseArr(input) {
          for (var i = input.length - 1; i &gt;= 0; i--) {
              var photoPlacement = employee[i].photo_url;
              //CHECKS TO SEE IF A PHOTO_URL OBJECT HAS SOMETHING IN IT, IF IT DOESN'T THEN INJECTS THE DEFAULT IMAGE
              if (photoPlacement.length &lt;= 0) {
                  photoPlacement = 'img/default.png'
              } else {
                  photoPlacement = employee[i].photo_url;
              }
              var employeePost = "&lt;div class='employee'&gt;&lt;div id='photo'&gt;&lt;img src=" + photoPlacement + "&gt;&lt;/div&gt;&lt;div id='closeButton' class='close'&gt;&lt;img src='img/close.png'&gt;&lt;/div&gt;&lt;div class='empName'&gt;" + employee[i].name + "&lt;/div&gt;&lt;/div&gt;";
              console.log(employee[i].name);
              console.log(employee[i].photo_url);
              directory.append(employeePost);
          }
      }
      var b = reverseArr(employee);
      //SHOW THE "X" (CLOSE) BUTTON
      $('.employee').hover(
              function() {
                  $(this).children("#closeButton").removeClass("close")
                  $(this).children("#closeButton").addClass("showClose")
                  //IF THE "X" (CLOSE) BUTTON IS CLICKED, DELETE PARENT DIV
                  $(this).children("#closeButton").click(function(event) {
                      event.preventDefault();
                      $(this).parent(".employee").remove();
                  })
              },
              function() {
                  $(this).children("#closeButton").removeClass("showClose")
                  $(this).children("#closeButton").addClass("close")
              }
      );
      //IF FORM BUTTON IS CLICKED, SUBMIT NEW DATA TO JSON OBJECT
      $(":button").click(function(event) {
          event.preventDefault();
      });
  });
  </code></pre>
  
  <p>This is how my HTML is formatted and need to have whatever name you type in the first input box to be added to data.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;link href="css/application.css" rel="stylesheet"&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div id="main-content"&gt;
              &lt;!-- The page width is 817px --&gt;
              &lt;!-- Example of using the form CSS to help you out. --&gt;
              &lt;form&gt;
                  &lt;div&gt;
                      &lt;label&gt;Full Name&lt;/label&gt;
                      &lt;input name="name" type="text" required /&gt;
                  &lt;/div&gt;
                  &lt;div&gt;
                      &lt;label&gt;Photo URL&lt;/label&gt;
                      &lt;input name="photo_url" /&gt;
                  &lt;/div&gt;
                  &lt;button type="submit"&gt;Create&lt;/button&gt;
              &lt;/form&gt;
              &lt;hr /&gt;
              &lt;!-- Employee list goes here. There is initial data for you in application.js --&gt;
              &lt;div id="directory"&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;script src="js/vendor/jquery.min.js" type="text/javascript"&gt;&lt;/script&gt;
          &lt;script src="js/vendor/underscore.js" type="text/javascript"&gt;&lt;/script&gt;
          &lt;script src="js/application.js" type="text/javascript"&gt;&lt;/script&gt;
          &lt;script src="js/main.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>