title: Fetching JSON Data to HTML table onclick button
body: <p>I'm trying to fetch my json data into a table while connected to tomcat in xampp.
  I couldn't fetch the data after clicking on the button. The data need not appear.</p>
  
  <p>Html File</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="ie=edge"&gt;
    &lt;title&gt;Document&lt;/title&gt;
    &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"&gt; &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;br&gt;&lt;br&gt;&lt;br&gt;
  &lt;div id="adminpage"&gt;
  &lt;h1 id="contentheader"&gt;Admin Page&lt;/h1&gt;
  &lt;button class="getleads"&gt;Show Lead&lt;/button&gt;
  &lt;br&gt;&lt;br&gt;
  &lt;table class="leadstable" border="2" align="center"&gt;
  &lt;thead&gt;
    &lt;th&gt;Name&lt;/th&gt;
    &lt;th&gt;Phone&lt;/th&gt;
    &lt;th&gt;Email Address&lt;/th&gt;
    &lt;th&gt;Nationality&lt;/th&gt;
    &lt;th&gt;Qualification&lt;/th&gt;
    &lt;th&gt;Course&lt;/th&gt;
  
  
  &lt;/thead&gt;
  
  &lt;tbody id="tdata"&gt;
  
  
  
  &lt;/tbody&gt;
  
  &lt;/table&gt;
  
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>script.js</p>
  
  <pre><code>$(document).ready(function(){
  $(".getleads").click(function(){
      $.getJSON("jsoncontent.json", function(data){
        $.each(data, function(key, value){
  $("#tdata").append("&lt;tr&gt;" + "&lt;td&gt;" + value.name + "&lt;/td&gt;" + "&lt;/tr&gt;")
        });
      });
    });
  });
  </code></pre>
  
  <p>jsoncontent.json</p>
  
  <pre><code>{
    "leads": [
        {
            "name": "Steady",
            "phone":"98574856",
            "email": "SteadyLim@Email.com",
            "nationality":"Singaporean",
            "qualification":"GCE A-Level",
            "course":"Diploma in Web Development"
        },
        {
            "name": "Michelee",
            "phone":"85748596",
            "email": "Micheleeyoke@nomail.com",
            "nationality":"foreigner",
            "qualification":"PSLE",
            "course":"Diploma in Computer Science"
        },
        {
            "name": "Oleary",
            "phone":"94857458",
            "email": "Olearynut@youmail.com",
            "nationality":"Singaporean",
            "qualification":"GCE O-Level",
            "course":"Diploma in Web Development"
        }
    ]
  }
  </code></pre>
  
  <p>I want that the json data to appear after clicking on that .getleads button. 
  As for now when I clicked the button, There's no error but it's just that the json data couldn't append into my table.</p>