PHP + jQuery getJson returns "Undefined"

Question

I am attempting to access a JSON object from a PHP script that looks like:

$results = array(
    'total' => $all_totalf,
    'error' => $all_errorsf,
 );
echo json_encode($results);

The JSON object looks like:

{"total":"11,644","error":"179"}

Then I have a jQuery script that looks like:

var url = "get_control_data.php";
var total;
$.getJSON(url, function (data) {
var total = data.total;
});
document.getElementById("total").innerHTML = total;

I am stuck because total is being returned as "undefined". Does anyone know what I am doing wrong?

Julian Goacher · Answer 1 · 2017-06-20T17:44:34.907

1

The problem is on this line in the getJSON callback:

var total = data.total;

The var here declares a new variable named total which is scoped only to the callback function. Remove the var and your code will set the total var in the outer scope instead.

That will only partly solve your problem. The other problem is that the outer code executes synchronously, whilst the callback code will execute asynchronously, sometime after the outer code has finished. This means that this line:

document.getElementById("total").innerHTML = total;

Is run before the total value has been read from the URL. Probably the easiest thing to do is just move that code into the callback, i.e.:

$.getJSON(url, function (data) {
  document.getElementById("total").innerHTML = data.total;
});

edited Jun 20 '17 at 17:44

answered Jun 20 '17 at 17:24

Julian Goacher

545
2
6

No. This question is a duplicate of what I commented. – Adam Azad Jun 20 '17 at 17:25
Perhaps it is - you hadn't marked the duplicate when I answered - but it's also the reason why his total was undefined. – Julian Goacher Jun 20 '17 at 17:31
@JulianGoacher it is still coming back as undefined. Even when removing the var like: – Thomas C Jun 20 '17 at 17:35
var url = "get_control_data.php"; var total; $.getJSON(url, function (data) { total = data.total; }); document.getElementById("total").innerHTML = total; – Thomas C Jun 20 '17 at 17:35
@ThomasC, please read the question linked above your's question to solve this problem. – Adam Azad Jun 20 '17 at 17:39
@JulianGoacher, kindly remove your answer or fix it. That's also good. – Adam Azad Jun 20 '17 at 17:40
@ThomasC I've updated the answer – Julian Goacher Jun 20 '17 at 17:41
@AdamAzad I've updated the answer to also include a description of how the code is executing, sync vs async. I think because it explicitly explains both scoping and the async behaviour that's it worth keeping. – Julian Goacher Jun 20 '17 at 17:42

PHP + jQuery getJson returns "Undefined"

1 Answers1