Fetching JSON Data to HTML table onclick button

Question

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": "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"
      }
  ]
}

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.

_“I couldn't fetch the data”_ — what do you mean by that? Do you get a 404 response? The dev tools provide a **Network** tab. Please confirm: Is the resource _found_ (e.g. HTTP 200 response)? If not, which _actual URL_ is requested? Please [edit] your question and fix the formatting of your JSON. Why is there an extra `});` at the end? — Sebastian Simon, Jun 30 '19 at 02:54
@SebastianSimon Hi sorry I have edited the code the extra ' }); ' It belongs to my script.js , What I mean by couldn't fetch the data is When I clicked on my button , The json name could not append into my table and there is no error shown. — Outblast2, Jun 30 '19 at 02:59
add `console.log(data)` before `$.each(data, function(key, value)` and let's know what you get in your console — Bosco, Jun 30 '19 at 04:17

score 1 · Answer 1 · answered Jun 30 '19 at 04:51

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": "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"
      }
  ]
}

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!

Tibrogargan · Answer 2 · 2019-06-30T03:26:13.413

0

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": "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"
    }
  ]
}

<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.

edited Jun 30 '19 at 03:26

answered Jun 30 '19 at 03:02

Tibrogargan

4,508
3
19
38

I'm new to Json and My code was learned from videos on youtube. As for the index, element. The element do i have to change it into something else? – Outblast2 Jun 30 '19 at 03:07
What do you mean by mocked data? – Outblast2 Jun 30 '19 at 03:14
[What is Mocking?](/questions/2665812/what-is-mocking). I've mocked your data retrieval method because I don't have access to your server (nor would it be appropriate to call it from a question) – Tibrogargan Jun 30 '19 at 03:16
Wouldn't be appropriate sorry. Try code runs with the data you provided. Either the server isn't returning the data the same way or there's an error in your copy. Make sure you do two things: 1) Replace only the ready function (use the top one, not the one from the example snippet). 2) Replace the version of jQuery, the one you're using has issues. Use 3.3.1 – Tibrogargan Jun 30 '19 at 03:22
I've replaced the jQuery version to 3.3.1. I removed the ready function but when I clicked on my .getleads button the still did not append into my table. Is there any other things i might have done wrong ? – Outblast2 Jun 30 '19 at 03:31
Could be any number of things. Do you see anything in the console? – Tibrogargan Jun 30 '19 at 03:33
As my project is a one-page website application whenever I clicked on a menu button it changes my body container. Originally this HTML file I provided in the question only consist of a div container instead of having the HTML and HEAD tags. So what i did also was to link my jQuery.min.js and script.js in my index.html which is the original page that has HTML and HEAD tags. But i not sure if doing this will link it to my HTML file i provided. – Outblast2 Jun 30 '19 at 03:34
I see nothing in the console that's the reason I'm so confused too. – Outblast2 Jun 30 '19 at 03:35
Don't think I can help you sorry, too hard to tell what's going on. You could try putting a breakpoint in your code and seeing if the data you're getting back really is what you expect. – Tibrogargan Jun 30 '19 at 03:38
Anyway your code help partially It managed to run thanks for the help tho! – Outblast2 Jun 30 '19 at 04:40

Fetching JSON Data to HTML table onclick button

2 Answers2