getJSON to read Json string in Jquery connected with button Click with examples.

Using Jquery we will develop code to handle Json data. For this we will use getJSON function and then using each looping we will display data.

We will start with simple Json object with a set of name value pairs. We have three examples here and each button is connected to one click event. To display the return data we have div element.

The Json data or the Json string is kept inside a .php file and for this example we have kept the string inside json1.php file.
Here is the string in Json format. You can keep in any file you want but output should match Json format.

{"id":"2","name":"Max Ruin","class1":"Three5","mark":"85"}

In the above example 'Show Data' button is connected to click event inside Jquery function block. WE read the Json string stored inside json1.php file.

$.getJSON("json1.php", function(return_data){

In above code we are reading the json string and storing them in return_data variable. Then we are using one each looping to display all name value pairs.
Here is the complete code.

<script >
$(document).ready(function(){
$("#b1").click(function(){
$.getJSON("json1.php", function(return_data){
$.each(return_data, function(key, value){
$("#d1").append(key + " => " + value + "<br>");
});
});
});
});
</script>
<input type="button" id="b1" value="Show Data">
<br>
<div id='d1' style="background-color: #f1f1f1;"></div>

Returning array of data using Json

We will have several records returned by database and we have to use array of data to create Json string for data transfer. Here is one such string.

{
"data":
[
{"id":"1","name":"John Deo","class":"Four5",
"mark":"75","sex":"male"},

{"id":"2","name":"Max Ruin","class":"Three5",
"mark":"85","sex":"male"},

{"id":"3","name":"Arnold","class":"Three5",
"mark":"55","sex":"male"},

{"id":"4","name":"Krish Star","class":"Four5",
"mark":"60","sex":"male"}
]
}

Now we have to modify the above code to display data by looping through each record.

Here is the source code of above demo

<script >
$(document).ready(function(){
$("#b2").click(function(){
$.getJSON("json2.php", function(return_data2){
$.each(return_data2.data, function(key2, value2){
$.each(value2,function(key_inside2,value_inside2){
$("#d2").append(key_inside2 + "=>" + value_inside2 + "<br>");
});
});
});
});
});
</script>
<input type="button" id="b2" value="Show Data Multi Line">

<br>
<div id='d2' style="background-color: #f1f1f1;"></div>

Using Object and array of data as Json String

Now we have both array and some object data as Json string Here is the string of data stored in json3.php file.

The source code is here

<script >
$(document).ready(function(){
$("#b3").click(function(){
$.getJSON("json3.php", function(return_data3){
$.each(return_data3.data, function(key3, value3){
$.each(value3, function(return_key3, return_value3){
$("#d3").append(return_key3 + "=>" + return_value3 + "<br>");
});
});
$.each(return_data3.value, function(return_key4, return_value4){
$("#d3").append(return_key4 + "=>" + return_value4 + "<br>");
});
});
});

});
</script>

Demo with all three types using getJSON

Script Download

The use the above demo you can download the zip file. Inside the main file is getJSON-demo.php file. The Json data string are kept inside json1.php, json2.php and json3.php file. Google SDN is used to link Json library so ensure that you are connected to internet while testing the script or you can download and use the Json library.

This article is written by plus2net.com team.

plus2net.com

Most Popular JQuery Scripts
1	Two dependant list boxes
2	Calendar with Date Selection
3	Data change by Slider
4	Show & Hide element

getJSON to read and display Json string data

{"id":"2","name":"Max Ruin","class1":"Three5","mark":"85"}

$.getJSON("json1.php", function(return_data){

Returning array of data using Json

Using Object and array of data as Json String

Script Download

Subscribe

1

2

3

4