Using callback to print json data

Question

Trying to get my json data from a php file and display.

So far I was able to request the data with ajax and log the data it to the console. (At least one thing seems to be working).

Then I attempted to use a callback so my script will wait for the data before it executes the display function. I followed a tutorial for this step by step but I must be doing something wrong because in the inspector it throws an error that my jsonData is not defined.

Then I try to display the data but without the callback working properly it won't work.

I'm going to try and explain what I did:

1. I wait for the document to load before running my script

$(document).ready(scriptWrapper);

2. I wrap the whole thing up in with a single function

function scriptWrapper(){
  displayJson();
}

3. I start the function with my callback parameter

function requestJson(_callback){

4. Request my data from my php file using ajax

$.ajax({
    url: "/test/senate.php",
    success: result,
});

5. Send the result of the data to the console.log

function result(jsonData){
    console.log (jsonData);
}

6. This marks the end of the callback

_callback();

7. Start the displayJson function

function displayJson(){

8. execute requestJson() with the showData() function as the parameter which I think means showData will wait for the callback before executing.

requestJson(showData());

9. This is the function that will display the json data in my output div.

function showData(){
    $(".output").append(jsonData);
}

Any insight would be appreciated!

I have a live version here congress.digitango.com/test/results.php

The full code is:

<div class="output"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
function scriptWrapper(){
  displayJson();
}

function requestJson(_callback){ 
  $.ajax({
    url: "/test/senate.php",
    success: result,
  });

  function result(jsonData){
    console.log (jsonData);
  }
  _callback();
}

function displayJson(){
  requestJson(showData());
  function showData(){
    $(".output").append(jsonData);
  }
}
$(document).ready(scriptWrapper);  
</script>

Tomalak · Accepted Answer · 2018-01-22 16:51:05Z

3

Your entire code is boilerplate. Empty functions that do nothing but call other functions and each other and callbacks... It's confusing and pointless. You are over-engineering. Don't do that.

You can condense everything you wrote into 3 lines.

<div class="output"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script type="text/javascript">
  $.getJSON("/test/senate.php").done(function (data) {
    $(".output").append(data);
  });
</script>

answered Jan 22, 2018 at 16:51

Tomalak

339k68 gold badges547 silver badges635 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

PeterMader · Accepted Answer · 2018-01-22 16:43:36Z

The function that you specify as success is the callback function. It will be called with the result of the request:

function requestJson () { 
  $.ajax({
    url: "/test/senate.php",
    success: result // call the 'result' function when you're done
  });

  function result (jsonData) {
    // do something with the data
  }
}

You could then do something like this:

function requestJson (callback) { // we accept the callback function as the parameter
  $.ajax({
    url: "/test/senate.php",
    success: callback, // call the callback function when you're done
  });
}

function displayJson () {
  requestJson(showData); // use 'showData' as the callback function

  function showData (jsonData) {
    $(".output").append(jsonData);
  } 
}

Charlie Heflin · Accepted Answer · 2018-01-22 16:48:09Z

1

Here's how I would do this to fix and simplify the code

<script type="text/javascript">

function scriptWrapper(){
  requestJson();
}

function requestJson(){ 

  $.ajax({
    url: "/test/senate.php",
    success: displayJson,
  });

}

function displayJson(jsonData){

  $(".output").append(jsonData);

}

$(document).ready(scriptWrapper);  

</script>

I'm not able to run the code at the moment but you may also need to change $(".output").append(jsonData); to $(".output").first().append(jsonData);

JQuery's $.ajax documentation has some helpful example of how to use callbacks

answered Jan 22, 2018 at 16:48

Charlie Heflin

17511 bronze badges

Collectives™ on Stack Overflow

Using callback to print json data

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related