title: Display JSON data on HTML page
body: <p>This project is dealing with database of scientific papers and citations. 
  I correctly implemented some PHP to use a users input (DOI) and search our database and pass the data to javascript. The javascript gets the data like so:</p>
  
  <pre><code>function getMETA() {
      var json = &lt;?php echo json_encode($data); ?&gt;;                    
  }
  </code></pre>
  
  <p>Using an HTML form with an onClick="getMETA()" the variable is correctly filled with the data and here is an example:</p>
  
  <pre><code>var json = [{"doi":"10.1103\/PhysRevB.79.054101","pub_date":"2009-02-02","journal":"Phys. Rev. B","title":"Absence of superconductivity in the high-pressure polymorph of MgB_{2}","authors":"Y. Ma, Y. Wang, and A. R. Oganov","metainfo":"79, 054101 (2009)"}];
  </code></pre>
  
  <p>This database query just contains meta data of the paper selected, I want to just display it on the webpage. This is what I tried:</p>
  
  <pre><code>Title: &lt;span id="title"&gt;&lt;/span&gt;&lt;br /&gt;
  Authors: &lt;span id="authors"&gt;&lt;/span&gt;&lt;br /&gt;
  Publish Date: &lt;span id="pubdate"&gt;&lt;/span&gt;&lt;br /&gt;
  Journal: &lt;span id="journal"&gt;&lt;/span&gt;&lt;br /&gt;
  </code></pre>
  
  <p>Then I used document.getElementById("journal").innerHTML but this is not working at all. I even tried to just set it to a string like so: document.getElementById("journal").innerHTML = "test"; and nothing is displayed on the webpage. I also tried this as a test:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;span id="title"&gt;TEST&lt;/span&gt;
  </code></pre>
  
  <p>JAVASCRIPT:</p>
  
  <pre><code>  var val = document.getElementById("title").innerHTML.value
    alert(val);
  </code></pre>
  
  <p>And I get an alert box that says "undefined"</p>
  
  <p>How can I get this document.getElementById to work? Or do you recommend another way to parse and display the json data on the webpage? Maybe in a border-less table format?</p>
  
  <p>Thanks!</p>