title: Getting data back from database as undefined in html but defined in the console
body: <p>I am creating a slim project using CRUD. I am trying to get 1 user, by using GET. When I use .append it returns data like this: the name is the request getting data from the database. </p>
  
  <ul>
  <li>undefined </li>
  <li>name </li>
  <li>undefined</li>
  <li>name</li>
  </ul>
  
  <p>Obviously I only want one user to be shown, however when I add .html instead of .append it just comes back undefined. </p>
  
  <p>This is my code that is coming back undefined </p>
  
  <pre><code> $(document).ready(function showStaff(processResponse) {
  $.ajax({
      type: 'GET',
      dataType: "json",
      url: "borrower.php/borrowers",
      success: showAllBorrowers,
      error: showError
  }); 
  });
  
  //shows borrowers in HTML
  function showAllBorrowers(responsedata){
  $.each(responsedata.borrower,function(index,borrower){
      $("#borrower_list").append("&lt;li type='square'&gt; Borrower Id:"+borrower.borrower_id+",FullName:"+borrower.first_name+" "+borrower.last_name+", Email:"+borrower.email);
      $("#borrower_list").append("&lt;/li&gt;");
  });
  }
  
  $(document).ready(function(){
  $("#btnSaveBorrower").click(function(){
      var borrower=new Borrower($("#firstName_add").val(),
                          $("#lastName_add").val(),$("#email_add").val());
      $.ajax({
          type: 'POST',
          dataType: "json",
          url: "borrower.php/borrowers",
          data:JSON.stringify(borrower),
          success:function(data){
              console.log(data)
              location.reload();
          },
      });
     });
  });
  
  
  function Borrower(firstName, lastName, email){
  this.firstname=firstName;
  this.lastname=lastName;
  this.email=email;
  }
  
  
  $("#btnSearch").click(function(){
      var id = $("#StaffBorrower_Id").val();
        $( "#update" ).show();
        $( ".delete" ).show();
        $("#btnUpdateBorrower").show();
        $("#btnDeleteBorrower").show();
              $.ajax({
                  type: 'GET',
                  dataType: "json",
                  url: "borrower.php/borrowers/" + id,
                  success: showResponse,
                  error: showError
              });
   });
  
  function showResponse(responsedata){
  var item = $("&lt;li&gt;"); item.text("Borrower Id:"+responsedata.borrower_id+",FullName:" +responsedata.first_name+" "+responsedata.last_name+", Email:"+    responsedata.email);
      $("#search_borrower").html(item); 
      item.attr("type", "square"); 
      item.attr("data-delete-id", responsedata.borrower_id); item.attr("data-update-id", responsedata.borrower_id);
          console.dir(responsedata);
  }
  
  
  $("#btnDeleteBorrower").click(function(){
      var result = confirm("Are you sure you want to delete?");
      if (result) {
          var staff= delete Borrower($("#borrower_Id").val(), $("#firstName").val(), $("#lastName").val(), $("#email").val()); 
              $.ajax({
                  type: 'DELETE',
                  dataType: "json",
                  url: "borrower.php/borrowers/"+$("[data-delete-id]").data("delete-id"),
                  success: function(res){
                      console.log(res);
                      location.reload();
                      },
                  error: showError
              });
      }
  });
  
  $("#btnUpdateBorrower").click(function(){
      var result = confirm("Are you sure you want to update?");
          if (result) {
              var borrower = new Borrower ($("#firstName").val(),
                               $("#lastName").val(), 
                              $("#email").val());               
              $.ajax({
                  type:'PUT',
                  dataType:"json",
                  url:"borrower.php/borrowers/"+$("[data-update-id]").data("update-id"),
  
                  data:JSON.stringify(borrower),
                  success:function(data){
                   console.log(data);
                   location.reload();
                  },
                  error: function(){
                   console.log("There seems to be an error")
                  }
              }); 
          }
  });
  </code></pre>
  
  <p>The console log is working, I am getting the data in the console but it isn't being returned in the html for some reason. Does anyone have any ideas why? Thanks </p>