title: Accessing JSON element returns undefined
body: <p>I'm trying to print out a JSON element called <code>favColor</code>.  I can see that <code>favColor</code> is included in the <code>response.data</code>, but I can't access it using <code>response.data.favColor</code> for some reason.</p>
  
  <p>If I print <code>response.data</code> to the console, I get the following:</p>
  
  <p><code>{"favColor":"green"}</code></p>
  
  <p>However, <code>response.data.favColor</code> returns <code>undefined</code>.</p>
  
  <p>My form:</p>
  
  <pre><code>  &lt;form&gt;
        &lt;label&gt;Favorite Color: &lt;/label&gt;
        &lt;br&gt;
        &lt;input id="favColor" name="favColor" type="text"&gt;
        &lt;input type="submit" value="Submit POST Data" id="submitPost"&gt;
    &lt;/form&gt;
    &lt;br&gt;
    &lt;div&gt;
        &lt;label&gt;Favorite Color:&lt;/label&gt;
        &lt;div id=returnedFavColor&gt;&lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>My Script:</p>
  
  <pre><code>document.addEventListener('DOMContentLoaded', post);
  
  function post() {
      document.getElementById('submitPost').addEventListener('click', function(event) {
          var req = new XMLHttpRequest();
          var payload = {favColor: null};
          payload.favColor = document.getElementById('favColor').value;
          req.open("POST", "https://httpbin.org/post", true);
          req.setRequestHeader('Content-Type', 'application/json');
          req.addEventListener('load',function(){
              if(req.status &gt;= 200 &amp;&amp; req.status &lt; 400){
                  var response = JSON.parse(req.responseText);
                  console.log(response.data);
                  document.getElementById('favColor').textContent = response.data.favColor;
              } else {
                  console.log("Error in network request: " + request.statusText);
              }
          });
          req.send(JSON.stringify(payload));
          event.preventDefault();
      });
  }
  </code></pre>