PHP json_encode then getJSON issue in javascript

Question

Sorry if this is still another thread on the subject but I am struggling since hours but could not find the solution. I am trying to get data from a Mysql database, create a JSON with php, then parse this JSON in javascript.

Here is my json.php

<?php

$link = mysql_pconnect("localhost", "root", "") or die("Could not connect". mysql_error());
mysql_select_db("people") or die("Could not select database");

$arr = array();

$rs = mysql_query("SELECT * FROM nom");

while($obj = mysql_fetch_object($rs)) {
    $arr[] = $obj;
}
echo '{"users":',json_encode($arr),'}';

/*
//The json object is :
{"users":[{"id":"1","prenom":"Alain","age":"23"},{"id":"2","prenom":"Bruno","age":"24"}]} 
*/
?>

Then I try to parse it into java

<div id="placeholder6"></div>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script>
    $.getJSON('http://localhost/json.php', function(data) {
    var output="<ul>";
    for (var i in data.users) {
        output+="<li>" + data.users[i].id + " " + data.users[i].prenom + "--" + data.users[i].age+"</li>";
    }

    output+="</ul>";
    document.getElementById("placeholder6").innerHTML=output;
});
</script>

when I replace localhost/json.php by the result in a file data.json, it works, when I open localhost/json.php with firefox, I can see the JSON table...so I do not know why it does not work with localhost/json.php. Is my php code or javascript code wrong ?

Thanks in advance for your help !

Answer 1

Try This in php

while($obj = mysql_fetch_object($rs)) {
    $arr[] = $obj;
}

$return = new stdClass();
$return ->users = $arr;

echo json_encode($return);

Answer 2

Try this method

var users= data.users;
$.each(users,function(index,users){
    console.log(users.prenom); /// and users.id etc
})

Answer 3

I think your web application server (like Apache or nginx) sends Content-Type: text/html by default or something of that sort for your json.php file. On the other hand, it looks like $.getJSON method requires a application/json content type field.

Try adding:

header("Content-Type: application/json");

to the top of the json.php file.

Edit - additional info:

I couldn't find in the original documentation of the $.getJSON method whether it, in fact, requires the specific Content-Type so I looked into the source code:

 https://github.com/jquery/jquery/blob/1.7.1/src/ajax.js#L294 

Here is the line of source code for jQuery 1.7.1 (which is the version you said that you use, I hope) for getJSON and as you can see, it calls jQuery.get with the last argument set to "json" .

In turn, the jQuery.get documentation reveals that this argument means:

The type of data expected from the server. Default: Intelligent Guess (xml, json, script, or html).

from: http://api.jquery.com/jQuery.get/

Thus, when you call $.getJSON("/url/to/file", ...) that first argument is expected to be a JSON. If you add the PHP code from the top of my answer, your web application server will mask the output of the php file as a JSON.