Mavengers

Example

Assuming we have following JSON content in result.json file −

{
"name": "Zara Ali",
"age" : "67",
"sex": "female"
}

Following is a simple example a simple showing the usage of this method −

<html>
   <head>
      <title>The jQuery Example</title>
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  
      <script type="text/javascript" language="javascript">
         $(document).ready(function() {
            $("#driver").click(function(event){
               $.getJSON('result.json', function(jd) {
                  $('#stage').html('<p> Name: ' + jd.name + '</p>');
                  $('#stage').append('<p>Age : ' + jd.age+ '</p>');
                  $('#stage').append('<p> Sex: ' + jd.sex+ '</p>');
               });
            });
         });
      </script>
  
   </head>
 
   <body>
 
      <p>Click on the button to load result.html file:</p>
  
      <div id="stage" style="background-color:#cc0;">
         STAGE
      </div>
  
      <input type="button" id="driver" value="Load Data" />
  
   </body>
 
</html>

Description

The jQuery.getJSON( url, [data], [callback] ) method loads JSON data from the server using a GET HTTP request.

The method returns XMLHttpRequest object.

Syntax

Here is the simple syntax to use this method −

$.getJSON( url, [data], [callback] )




Parameters

Here is the description of all the parameters used by this method −


url − A string containing the URL to which the request is sent


data: − This optional parameter represents key/value pairs that will be sent to the server.


callback: − This optional parameter represents a function to be executed whenever the data is loaded successfully.

jquery get json data from json array with for loop

var data = {

"users": [

{
"firstName": "Ray",

"lastName": "Villalobos",

"joined": {

"month": "January",

"day": 12,

"year": 2012

}

},

{
"firstName": "John",

"lastName": "Jones",

"joined": {

"month": "April",

"day": 28,

"year": 2010

}

}

]

};
for (var i in data.users) {

alert(data.users[i].firstName + " " + data.users[i].lastName + " " + data.users[i].joined.month);

}

jquery get json data by id

var data = {

"users": [

{

"firstName": "Ray",

"lastName": "Villalobos",

"joined": 2012

},

{

"firstName": "John",

"lastName": "Jones",

"joined": 2010

}

]

}

alert(data.users[1].firstName + " " + data.users[1].lastName + " " + data.users[1].joined);

Jquery iterate through json array with for loop

Jquery iterate through json array with foreach loop

jquery calculate percentage of array element and push percentage into other array

var array = [20, 30, 40, 50, 60];
var newarray = [];
$.each(array, function (index, value) {
newarray.push(value / 100);
});

console.log(newarray);

Mavengers

Tuesday, April 21, 2015

Jquery getJson method Example

Example

Jquery getJson method syntax