title: Json Array Elements to html page
body: <p>I'm new to using JSON and I'm trying to do something that I'm convinced is very simple but I've been looking for a while and haven't yet found the right way to do it.
  I have two files, a html page and a json file with an array inside it.
  The contents of the JSON file looks like this:</p>
  
  <pre><code>[
  { "name": "EXAMPLE1",
        "description": "this is a sample description"},
  { "name": "EXAMPLE2",
    "description": "This is a second sample description"}
  ]
  </code></pre>
  
  <p>What I'm trying to do fetch the array elements and display them on the html page with "name" being a heading (h1) and "description" being a paragraph (p). </p>
  
  <p>Below is the code I have so far in my html file and I wouldn't be surprised if I've totally misunderstood how to go about this:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;Json Arrays&lt;/title&gt;  
      &lt;/head&gt;
  
      &lt;body&gt;
  
  
      &lt;/body&gt;
      &lt;script&gt;
      $(document).ready(function(){
  
  $.getJSON("testarray.json", function(data){
  $.each(data, function)(){
  $("body").append("&lt;h1&gt;"+this['name']+&lt;br&gt;"&lt;/h1&gt;""&lt;p&gt;"+this['description']+&lt;br&gt;"&lt;/p&gt;");
  }
  }
  }
          &lt;/script&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Any suggestions would be very appreciated.</p>