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": "[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.

“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
– Sebastian Simon, Commented Jun 30, 2019 at 2: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
– Outblast2, Commented Jun 30, 2019 at 2:59
add console.log(data) before $.each(data, function(key, value) and let's know what you get in your console — Bosco
– Bosco, Commented Jun 30, 2019 at 4:17

Outblast2 · Accepted Answer · 2019-06-30 04:51:22Z

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!

Tibrogargan · Accepted Answer · 2019-06-30 03:26:13Z

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": "[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.

edited Jun 30, 2019 at 3:26

answered Jun 30, 2019 at 3:02

Tibrogargan

4,6323 gold badges21 silver badges41 bronze badges

10 Comments

Outblast2 Over a year ago

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 Over a year ago

What do you mean by mocked data?

Tibrogargan Over a year ago

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 Over a year ago

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

Outblast2 Over a year ago

I've replaced the jQuery version to 3.3.1. I removed the ready function but when I clicked on my .getleads button the <tr> still did not append into my table. Is there any other things i might have done wrong ?

|

Collectives™ on Stack Overflow

Fetching JSON Data to HTML table onclick button

2 Answers 2

Comments

10 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

10 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related