Parsing JSON Data from PHP Using jQuery
July 28, 2008have been studying parsing JSON from PHP using AJAX to display it in the client side and jQuery had been a great help to me. Here is a very simple code in parsing JSON using jQuery that i made.
tablejsondata.php
This file makes the request to a php file and displays the returned data into a table.
<html>
<head>
<title>Parsing JSON From PHP Using jQuery</title>
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript">
</script>
</head>
<body>
<a href="#" id="loaduserdata">User Data</a>
<table id="userdata" border="1">
<thead>
<th>First Name</th>
<th>Last Name</th>
<th>Email Address</th>
<th>City</th>
</thead>
<tbody></tbody>
</table>
<script>
$(document).ready(function(){
});
$("#loaduserdata").click(function(){
$("#userdata tbody").html("");
$.getJSON(
"jsondata.php",
function(data){
$.each(data.userdata, function(i,user){
var tblRow =
"<tr>"
+"<td>"+user.first+"</td>"
+"<td>"+user.last+"</td>"
+"<td>"+user.email+"</td>"
+"<td>"+user.city+"</td>"
+"</tr>"
$(tblRow).appendTo("#userdata tbody");
});
}
);
});
</script>
</body>
</html>
jsondata.php
This is the file that contains the JSON data.
<?php
$json = '{
"userdata": [
{
"first":"Ciaran",
"last":"Huber",
"email":"elementum.purus@utdolordapibus.edu",
"city":"Mayagüez"
},
{
"first":"Lester",
"last":"Watkins",
"email":"orci.sem.eget@quamvelsapien.edu",
"city":"Laguna Beach"
},
{
"first":"Mannix",
"last":"Gilmore",
"email":"sed.sem.egestas@AliquamnislNulla.com",
"city":"Minot"
},
{
"first":"Nathaniel",
"last":"Holland",
"email":"a.odio@Donecnibh.org",
"city":"San Angelo"
},
{
"first":"Wylie",
"last":"Drake",
"email":"lobortis.nisi.nibh@Integer.edu",
"city":"Roseville"
},
{
"first":"Salvador",
"last":"Alford",
"email":"fringilla@adipiscing.edu",
"city":"Vacaville"
},
{
"first":"Kiara",
"last":"Barton",
"email":"fringilla.est.Mauris@utpellentesqueeget.ca",
"city":"Johnson City"
},
{
"first":"Moses",
"last":"Miller",
"email":"per.inceptos@aliquam.edu",
"city":"Boulder Junction"
},
{
"first":"Hillary",
"last":"Serrano",
"email":"elit.pretium.et@scelerisquesedsapien.com",
"city":"Martinsburg"
}
]
}';
echo $json;
?>
References and Guides:
http://docs.jquery.com/GetJSON
http://www.json.org/js.html
Download the latest jquery file.
Hi, I loost all day working on this problem. I found your example and I found that also your code, doesn’t work on IE.
Maybe U have already solved this problem, if yes, can U tell me how?!
Thanks!
hi Liaam,
i’ve re-tested it again but it’s working.
is this your email? i’ll try to send you the files.
Thanks a lot especially on json part.
@Ervin Ter,
you’re very much welcome. i’m glad you liked this post
jhoy
if you wanna parse a php array instead you use
the json_encode($php_array) function.
If you want to parse a json object in php you do the opposite: json_decode($json_object[, true || false])
if you want to parse it into an object you leave out the second parameter or set it to false.
if you want an associative array you set second parameter to true.
Lot’s of thanks for your help from catalonia!!!!
Found this really helpful, thanks for posting.
Hi, how can I make it working on cross-domain like below?
“http://otherdomain/jsondata.php”
It gives me error-
Access to restricted URI denied” code: “1012
@shoorace,
can you check out this post
http://jquery-howto.blogspot.com/2008/12/access-to-restricted-uri-denied-code.html
HTH
jhoy
Hi,
could you please send me the updated code to my mail id?
I copied your code and run it in my local system. Its working fine in firefox but not in IE7.
Could you please whats needs to change in the above code
hi scvinodkumar,
what i just did was to clear the cache and it worked. just a couple times of clearing though.
HTH
jhoy
[...] the article here: Parsing JSON Data from PHP Using jQuery « jhoy imperial and the web Share and [...]