How to implement OnClick event to call $.getJSON Function

Question

I'm working with an Json Data to populate the Html table with it. The code works fine when I exclude

function getAllDepts()
{

but I would like to insert an button so that it would populate the html table with new JSON Data is availaible and refresh the Table.

But, I nothing is working for me.

Any Suggestions??

My Html code is

<!DOCTYPE html>
<html>
<head>

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
 <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 
</head>
<body>
<div class="container">
 
<div class="table-responsive">
 <h1>Json</h1>
 <br/>

 <table class="table table-bordered table-striped" id="employee_table">
  <tr>
   <th>Class</th>
   <th>Time</th>
   
  </tr>
 </table>
</div>
</div>
<input id="getAllDepts" type="button" value="Create Table From JSON" />

</body>

</html>

<script>

$(document).ready(function(){
  var employee_data= '';
  if(localStorage.myJSON !== undefined){
    var myJSON = JSON.parse(localStorage.myJSON);
    employee_data += '<tbody>';
    $.each(myJSON, function(key, value){
      employee_data += '<tr>';
      employee_data += '<td>'+value.class+'</td>';
      employee_data += '<td>'+value.time+'</td>';

      employee_data += '</tr>';
    });
    employee_data += '</tbody>';
    $('#employee_table').append(employee_data);
  }

  employee_data= '';  // empty employee_data


$('#getAllDepts').click(function() {
  $.getJSON("https://api.myjson.com/bins/8qktd", function(data){
      $("#yourtableid tbody").remove();    // Empty table before filling it with new data

      localStorage.setItem(myJSON, JSON.stringify(data)); // Save new data in localStorage
      $.each(data, function(key, value){
        employee_data += '<tr>';
        employee_data += '<td>'+value.class+'</td>';
        employee_data += '<td>'+value.time+'</td>';

        employee_data += '</tr>';
      });
      $('#employee_table').append(employee_data);
  });
})
</script>

and another Problem I'm facing is while it is offline ,[ ( of course when I remove function getAllDepts() { ) from there, it runs fine ], On that occasion it populates the table with json data only when Online and when offline it don't work anymore and only column header is shown.

My json Data is

[

    {
    "id":"1",    
    "time":"10-15",
    "class":"John Smith"
    
},
{


    "id":"2",
   "time":"10-15",
    "class":"John Smith"
},

{

    "id":"3",
   "time":"10-15",
    "class":"John Smith"
},

{
    "id":"4",
    "time":"10-15",
    "class":"John Smith"
},
{


    "id":"5",
   "time":"10-15",
    "class":"John Smith"
},

{

    "id":"6",
   "time":"10-15",
    "class":"John Smith"
},

{
    "id":"7",
  "time":"10-15",
    "class":"John Smith"
},
{


    "id":"8",
   "time":"10-15",
    "class":"John Smith"
},

{

    "id":"9",
   "time":"10-15",
    "class":"John Smith"
},

{
    "id":"10",
    "time":"10-15",
    "class":"John Smith"
},
{


    "id":"11",
    "time":"10-15",
    "class":"John Smith"
},

{

    "id":"12",
    "time":"10-15",
    "class":"John Smith"
}

]

Are you putting that script tag in your HTML page? Your HTML example does not show that. — Dan Zuzevich, Oct 14 '17 at 14:07
The `getAllDepts()` function is in a closed scope and not visible at the page level. Your browser's development console is likely telling you this. Since you're using jQuery anyway, use jQuery. Instead of an inline `onclick` attribute, attack a click handler with jQuery. — David, Oct 14 '17 at 14:07
*"it is not working"* is not a proper technical problem statement. Take some time to read [ask] — charlietfl, Oct 14 '17 at 14:08
@DanielZuzevich yes indeed I have put script tag inside an HTML page, but to make clear about the problem, I have mentioned here separately. — BlueYeti24, Oct 14 '17 at 14:11
@David, So How can I do that..I'm new to programming and all I learn is from Tutorials, examples and youtubes. so, I really don't know how to pull this one out. — BlueYeti24, Oct 14 '17 at 14:12
@charlietfl, yes now I have edited my Question. Thanks for correcting me. — BlueYeti24, Oct 14 '17 at 14:13
@David, well thanks, I've been there before but I couldn't make any sense with my code to correct or make it work. — BlueYeti24, Oct 14 '17 at 14:14
Edited the title but first sentence does not explain the specific problem clearly — charlietfl, Oct 14 '17 at 14:16
@BlueYeti24: Then start with something simpler. The jQuery documentation and tutorials are designed to help you. Since you're trying to make something happen on the click of a button, start with just simply trying to respond to the click of a button. There's also more explanation here: https://stackoverflow.com/questions/12627443/jquery-click-vs-onclick as well as many other places. Don't try to implement everything you want all at once. When something isn't working, you'll have no idea which piece is broken. Get each individual piece working one at a time. — David, Oct 14 '17 at 14:17
@charlietfl, yes I think now it make more sense and explains the problem clearly. Thanks — BlueYeti24, Oct 14 '17 at 14:20
Better. But *"nothing is working for me"* doesn't tell us much about what you tried. Unfortunately writing a good question takes a bit of effort to first explain the problem clearly, and show what you tried and also identify errors. I am not trying to be negative but rather guide you to using the site more efficiently by making it very clear what your issue really is — charlietfl, Oct 14 '17 at 14:21
@David, Yes I"m working on that too..but already I have published an app on Google play store but whenever the new Data comes, users need to update the app. So I came across JSON , and I am willing to learn more about it later....and would also be very helpful to understad the problem if you or someone could...what is wrong with above code and what must be done to correct it. — BlueYeti24, Oct 14 '17 at 14:21
@BlueYeti24: When you look at your browser's development console during debugging/testing, is there any error at all? — David, Oct 14 '17 at 14:23
@David, I used the solution by Daniel, and it throws me an error of unexpected end of input. — BlueYeti24, Oct 14 '17 at 14:32
@BlueYeti24: It looks like you forgot to close the `document.ready` handler. Having consistent indenting and code formatting would make typos like that easier to spot. — David, Oct 14 '17 at 14:41

Dan Zuzevich · Accepted Answer · 2017-10-14T14:54:41.893

1

You could do something like this:

Wrap your getJSON function with a click listener. Here is your rewritten script tag:

<script>
$(document).ready(function() {
  var employee_data= '';

  if(localStorage.myJSON !== undefined){
    var myJSON = JSON.parse(localStorage.myJSON);
    employee_data += '<tbody>';
    $.each(myJSON, function(key, value){
      employee_data += '<tr>';
      employee_data += '<td>'+value.class+'</td>';
      employee_data += '<td>'+value.time+'</td>';

      employee_data += '</tr>';
    });
    employee_data += '</tbody>';
    $('#employee_table').append(employee_data);
  }

  employee_data= '';  // empty employee_data

  $('#getAllDepts').click(function() {
    $.getJSON("https://api.myjson.com/bins/8qktd", function(data){
        $("#yourtableid tbody").remove();    // Empty table before filling it with new data

        localStorage.setItem(myJSON, JSON.stringify(data)); // Save new data in localStorage
        $.each(data, function(key, value){
          employee_data += '<tr>';
          employee_data += '<td>'+value.class+'</td>';
          employee_data += '<td>'+value.time+'</td>';

          employee_data += '</tr>';
        });
        $('#employee_table').append(employee_data);
    });
  })

});
</script>

Just add an id to your input element in the HTML element like so:

<input id="getAllDepts" type="button" value="Create Table From JSON" />

Your function is not returning any data when you are offline, because you are making an AJAX request to an URL that is hosted on the internet. Try creating a mock JSON file on your local computer to work with instead if you want to use it offline.

An easy way to test offline would be to just create your own json file, with whatever data you want. For example: you could create a file called test.json and filled it with your own valid JSON data.

Just change your ajax request to point to the local file, instead of the url on the internet. You could swap these out whenever you wanted. Quick example:

$.getJSON("data.json", function(data){

Not sure what your directory structure looks like, but you might have to mess around with the path to the json file.

edited Oct 14 '17 at 14:54

answered Oct 14 '17 at 14:19

Dan Zuzevich

3,651
3
26
39

when I implement your method , It throws an error, unexpected end of input in console...but when I remove the first line $('#getAllDepts').click(function() { , it works fine. – BlueYeti24 Oct 14 '17 at 14:31
Can you post all of the HTML file, without the JS file separated. You probably pasted it in wrong somewhere. – Dan Zuzevich Oct 14 '17 at 14:34
yes now I have edited above question with code that is throwing an error. – BlueYeti24 Oct 14 '17 at 14:39
Try my new updated answer. Just paste it in like I have it. – Dan Zuzevich Oct 14 '17 at 14:39
Yeah, your code is missing the closing }) for the top level document.ready function. My updated answer will work for you. Use that instead of your code. – Dan Zuzevich Oct 14 '17 at 14:40
yes indeed it works fine. Thanks a lot and for offline use ...what is the good approach to make it work and read json for exaple if I have example.json in same directory as index.html if I'm offline. – BlueYeti24 Oct 14 '17 at 14:45
I will add a section to the answer that will help you out. If it works for you, kindly mark the answer as the correct one for your situation. =) – Dan Zuzevich Oct 14 '17 at 14:46
again I encounter some weird problem, It keeps adding more table below every time I click on button. How do I stop this and only replace the previous table?? – BlueYeti24 Oct 14 '17 at 14:48
It might be best you start a completely new question for that problem, with all of your new code. – Dan Zuzevich Oct 14 '17 at 15:09

How to implement OnClick event to call $.getJSON Function

1 Answers1