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 !

Finally it worked, I had to add "header("Content-Type: application/json");" and "header("Access-Control-Allow-Origin: *");" to my php file. — user3833880, Aug 09 '14 at 14:57

baxri · Answer 1 · 2014-08-09T12:10:27.113

0

Try This in php

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

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

echo json_encode($return);

edited Aug 09 '14 at 12:10

answered Aug 09 '14 at 11:34

baxri

307
1
10

I tried of course. I guess it was json_encode and not jsob_encode. The json.php file does not show anything now when I open it with firefox. Is this normal ? – user3833880 Aug 09 '14 at 12:04

score 0 · Answer 2 · answered Aug 09 '14 at 11:36

0

Try this method

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

answered Aug 09 '14 at 11:36

Jithin Lukose

344
4
18

Hi, thanks for your answer. It does not work even if I replace the json.php by data.json. – user3833880 Aug 09 '14 at 11:46
var data= {"users":[{"id":"1","prenom":"Alain","age":"23"},{"id":"2","prenom":"Bruno","age":"24"}]}; var users= data.users; $.each(users,function(index,users){ console.log(users.prenom); /// and users.id etc }) – Jithin Lukose Aug 09 '14 at 11:55
Thanks. This does not work for me. I use "http://code.jquery.com/jquery-1.7.1.min.js". what do you use ? – user3833880 Aug 09 '14 at 12:02
I got this error: XMLHttpRequest cannot load http://localhost/json.php. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. – user3833880 Aug 09 '14 at 12:13
Finally, it worked!I had to add header("Content-Type: application/json"); and header("Access-Control-Allow-Origin: *"); to my php file. – user3833880 Aug 09 '14 at 14:56

score 0 · Answer 3 · 2014-08-09T12:42:32.110

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.

PHP json_encode then getJSON issue in javascript

3 Answers3