title: How to display errors from JSON response in a DIV?
body: <p>I have an AJAX form to change password, I want to display all the validation errors in a HTML DIV.</p>
  
  <p>Below is my code, it's working fine to submit the form, but I can't pass the errors to the DIV, I keep getting:  <code>[object Object]</code> .</p>
  
  <pre><code>var url = "/posts/editProfile"; // the script where you handle the form input.
  
  $.ajax({
         type: "POST",
         url: url,
         data: $("#profileForm").serialize(), // serializes the form's elements.
         success: function(data)
         {
  
             alert(data); // show response from the php script.
  
         },
  
         error: function(data)
         {
  
          console.log(data);
  
          $("#response").text(data);
  
         }
  
       });
  
  e.preventDefault(); 
  
  });
  </code></pre>
  
  <p><code>&lt;div id="response"&gt;
     &lt;!-- output here --&gt;
  &lt;/div&gt;</code></p>
  
  <p>Here's a screenshot of the response I got in the Console.
  <a href="https://i.stack.imgur.com/tSZEb.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tSZEb.png" alt="screenshot"></a></p>