CODEWITHSUNDEEP
jqueryhtmljson
Outblast2
Outblast2

Reputation: 29

Fetching JSON Data to HTML table onclick button

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.

Html File

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> </script>
</head>
<body>
<br><br><br>
<div id="adminpage">
<h1 id="contentheader">Admin Page</h1>
<button class="getleads">Show Lead</button>
<br><br>
<table class="leadstable" border="2" align="center">
<thead>
  <th>Name</th>
  <th>Phone</th>
  <th>Email Address</th>
  <th>Nationality</th>
  <th>Qualification</th>
  <th>Course</th>


</thead>

<tbody id="tdata">



</tbody>

</table>

</div>

</body>
</html>

script.js

$(document).ready(function(){
$(".getleads").click(function(){
    $.getJSON("jsoncontent.json", function(data){
      $.each(data, function(key, value){
$("#tdata").append("<tr>" + "<td>" + value.name + "</td>" + "</tr>")
      });
    });
  });
});

jsoncontent.json

{
  "leads": [
      {
          "name": "Steady",
          "phone":"98574856",
          "email": "[email protected]",
          "nationality":"Singaporean",
          "qualification":"GCE A-Level",
          "course":"Diploma in Web Development"
      },
      {
          "name": "Michelee",
          "phone":"85748596",
          "email": "[email protected]",
          "nationality":"foreigner",
          "qualification":"PSLE",
          "course":"Diploma in Computer Science"
      },
      {
          "name": "Oleary",
          "phone":"94857458",
          "email": "[email protected]",
          "nationality":"Singaporean",
          "qualification":"GCE O-Level",
          "course":"Diploma in Web Development"
      }
  ]
}

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.

Upvotes: 1

Views: 4981

Answers (2)

Outblast2
Outblast2

Reputation: 29

This code has managed to run after tedious editing and thanks for all the help!

adminpage.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>ABC Learning Centre</title>
<link rel="stylesheet" href="style.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>
<!--<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>-->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">

</head>
    <div id="adminpage">
      <br><br>
      <h1 id="contentheader">Admin Page</h1>
      <br>
    <button id="getlead" onclick="loadLeads()">Show Leads</button>
    <br><br><br>
      <table class="leadstable" border="2" align="center">
          <col width="100">
          <col width="100">
          <col width="200">
          <col width="130">
          <col width="150">
          <col width="350">
          <col width="200">

      <thead>
        <th>Name</th>
        <th>Phone</th>
        <th>Email Address</th>
        <th>Nationality</th>
        <th>Qualification</th>
        <th>Course</th>
        <th>Action</th>
      </thead>
      <tbody id="tdata">
      </tbody>
      </table>

    </div>
<div class="footer">
<ul class="footercontent1">
    <li><h3>About ABC</h3></li>
    <li><a href="#" data-target="home.html">Home</a></li>
    <li><a href="#" data-target="aboutus.html">About Us</a></li>
    <li><a href="#" data-target="privacypolicy.html">Privacy Policy</a></li>
    <li><a href="#" data-target="sitemap.html">Sitemap</a></li>
</ul>

<ul class="footercontent2">
<li><h3>Certifications</h3></li>
<li><img src="image/SSG.png" width="80" height="80"></li>
</ul>


<ul class="footercontent3">
    <li><h3>Look For Us</h3></li>
    <li>123 Anatasha North Street<br>555123<br>#01-12</li>

    <li><h3>Operating Hours</h3></li>
    <li>Monday to Saturday<br>9:00am - 10:00pm<br>Closed on Sunday and Public Holidays</li>


</ul>
<ul class="footercontent4">
<li><h3>Connect With Us</h3></li>
<li><a href="http://www.facebook.com"><img src='image/facebook.PNG' width="70" height="70" /></a>
    &nbsp;&nbsp;<a href="http://www.twitter.com"><img id="twitterimage" src='image/twitter.png' width="70" height="70" /></a>
    &nbsp;&nbsp;<a href="http://www.instagram.com"><img src='image/instagram.png' width="70" height="70" /></a></li>
</ul>

<p id="footercopyright"><br><br>Copyright © 2018 ABC Learning Centre, Singapore. All rights reserved.</p>
</div>

</body>
</html>

script.js

var leads = [];
function loadLeads()
{   $.getJSON('jsoncontent.json', function (data) {
       $.each(data.leads, function(i, f) {
          var tblRow = "<tr>" + "<td>" + f.name + "</td>" +
           "<td>" + f.phone + "</td>" + "<td>" + f.email + "</td>" + "<td>" + f.nationality + "</td>" + "<td>" + f.qualification + "</td>" + "<td>" + f.course + "</td>"
           + "<td>" + "<button>Edit</button>" + "   " + "<button>Delete</button>" + "</td>" + "</tr>";
           $(tblRow).appendTo(".leadstable tbody");
     });

   });
  };

jsoncontent.json

{
  "leads": [
      {
          "name": "Steady",
          "phone":"98574856",
          "email": "[email protected]",
          "nationality":"Singaporean",
          "qualification":"GCE A-Level",
          "course":"Diploma in Web Development"
      },
      {
          "name": "Michelee",
          "phone":"85748596",
          "email": "[email protected]",
          "nationality":"foreigner",
          "qualification":"PSLE",
          "course":"Diploma in Computer Science"
      },
      {
          "name": "Oleary",
          "phone":"94857458",
          "email": "[email protected]",
          "nationality":"Singaporean",
          "qualification":"GCE O-Level",
          "course":"Diploma in Web Development"
      }
  ]
}

My answer is Solved Thanks to all the people who helped! My Table now append the data from my JSON file and even the buttons I added in are showing!

Upvotes: 1

Tibrogargan
Tibrogargan

Reputation: 4603

Your JSON is an object with a single property, leads which is an array of objects.

$.JSONget is going to return that object in the data argument passed to your handler. Your handler is calling the Object override of jQuery.each. The handler for that will get called exactly once with the key = "leads" and the value = the array stored in the leads property. That array has no member called "name". You want to instead pass .each the contents of the leads property so it calls the Array override instead.

Modify your code to:

$(function(){
  $(".getleads").click(function(){
    $.getJSON("jsoncontent.json", function(data){
      $.each(data.leads, function(index, value){
        $("#tdata").append("<tr>" + "<td>" + value.name + "</td>" + "</tr>")
      });
    });
  });
});

Example using mocked data: 

$(function(){
  $(".getleads").click(function(){
    //$.getJSON("jsoncontent.json", function(data){
      $.each(data.leads, function(index, value){
        $("#tdata").append("<tr>" + "<td>" + value.name + "</td>" + "</tr>")
      });
    //});
  });
});

let data =
{
  "leads": [
    {
      "name": "Steady",
      "phone":"98574856",
      "email": "[email protected]",
      "nationality":"Singaporean",
      "qualification":"GCE A-Level",
      "course":"Diploma in Web Development"
    },
    {
      "name": "Michelee",
      "phone":"85748596",
      "email": "[email protected]",
      "nationality":"foreigner",
      "qualification":"PSLE",
      "course":"Diploma in Computer Science"
    },
    {
      "name": "Oleary",
      "phone":"94857458",
      "email": "[email protected]",
      "nationality":"Singaporean",
      "qualification":"GCE O-Level",
      "course":"Diploma in Web Development"
    }
  ]
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="getleads">Show Lead</button>
<table class="leadstable" border="2" align="center">
<thead>
  <th>Name</th>
  <th>Phone</th>
  <th>Email Address</th>
  <th>Nationality</th>
  <th>Qualification</th>
  <th>Course</th>
</thead>
<tbody id="tdata">
</tbody>
</table>

You probably also want to use a more recent version of jQuery.

Upvotes: 0

Related Questions