title: Unable to add JSON into DOM via javascript
body: <p>I am having a problem entering the text of the external JSON file into my DOM. I have used the alert command to confirm i was able to retrieve the data, now i cannot add the retrieved data into the DOM.</p>
  
  <pre><code>    &lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;Starting Point&lt;/title&gt;
  &lt;script&gt;
  function do_exercise () {
      var x = new XMLHttpRequest();
      x.open('GET', 'http://tmaserv.scem.uws.edu.au/chapters/?n=2', true);
      x.onreadystatechange = function() {
          if (x.readyState == 4 &amp;&amp; x.status ==200) {
              obj = (x.responseText);
              alert(obj);
              obj = JSON.parse(text);
              document.getElementById("section1").innerHTML =
              obj.map(function(chap) { 
              return chap.data}).join("&lt;br /&gt;");
          }
      }
  
      x.send(null);
  }
      &lt;/script&gt;
          &lt;/head&gt;
          &lt;body&gt;
              &lt;nav&gt;           
              &lt;button onclick="do_exercise();"&gt;Click Me&lt;/button&gt;      
              &lt;/nav&gt;
              &lt;section id = "section1"&gt;
              &lt;h1&gt;Heading One&lt;/h1&gt;
              &lt;p&gt;Paragraph One.&lt;/p&gt;
              &lt;/section&gt;
      &lt;/body&gt;
  </code></pre>