title: How to return JSON data after a 400 bad request
body: <p>I have an Ajax request I make to my REST API after a user enters incorrect form details, for example: An invalid username, blank email address, etc. The data returned looks like this:</p>
  
  <pre><code>HTTP 400 Bad Request
  Allow: POST, OPTIONS
  Content-Type: application/json
  Vary: Accept
  {
      "username": [
          "Username already taken."
      ],
      "email": [
          "This field may not be blank."
      ],
      "password1": [
          "This field may not be blank."
      ],
      "password2": [
          "This field may not be blank."
      ]
  }
  </code></pre>
  
  <p>Here's my code:</p>
  
  <pre><code>console.log(send_data(register_url, data));
  
  function send_data(url, data) {
      return $.ajax({
          url: url,
          type: 'POST',
          data: data,
          success: function (data) {
          },
  
          error: function (xhr) {
          }
      });
  }
  </code></pre>
  
  <p>When I call the function, I do retrieve all of the data. Like so:</p>
  
  <pre><code>abort: ƒ (e)
  always: ƒ ()
  catch: ƒ (e)
  done: ƒ ()
  fail: ƒ ()
  getAllResponseHeaders: ƒ ()
  getResponseHeader: ƒ (e)
  overrideMimeType: ƒ (e)
  pipe: ƒ ()
  progress: ƒ ()
  promise: ƒ (e)
  readyState: 4
  responseJSON: {email: Array(1), password1: Array(1), password2: Array(1)}
  responseText: "{"email":["This field is required."],"password1":["This field is required."],"password2":["This field is required."]}"
  setRequestHeader: ƒ (e,t)
  state: ƒ ()
  status: 400
  statusCode: ƒ (e)
  statusText: "Bad Request"
  then: ƒ (t,r,i)
  __proto__: Object
  </code></pre>
  
  <p>However, when I do this: </p>
  
  <pre><code>let resp = send_data(register_url, data);
  console.log(resp.responseJSON);
  </code></pre>
  
  <p>I get <code>undefined</code> when in my JavaScript console. Why is that? Why can't I retrieve the data in responseJSON?</p>