jQuery.getJSON()

Categories: Ajax > Shorthand Methods

jQuery.getJSON( url, [ data ], [ callback(data, textStatus) ] ) Returns: XMLHttpRequest

Description: Load JSON-encoded data from the server using a GET HTTP request.

version added: 1.0jQuery.getJSON( url, [ data ], [ callback(data, textStatus) ] )

urlA string containing the URL to which the request is sent.

dataA map or string that is sent to the server with the request.

callback(data, textStatus)A callback function that is executed if the request succeeds.

This is a shorthand Ajax function, which is equivalent to:

$.ajax({
  url: url,
  dataType: 'json',
  data: data,
  success: success
});

The callback is passed the returned data, which will be a JavaScript object or array as defined by the JSON structure and parsed using the eval() function.

Note: For details on the JSON format, see http://json.org/.

Most implementations will specify a success handler:

$.getJSON('ajax/test.json', function(data) {
  $('.result').html('<p>' + data.foo + '</p>'
    + '<p>' + data.baz[1] + '</p>');
});

This example, of course, relies on the structure of the JSON file:

{
  "foo": "The quick brown fox jumps over the lazy dog.",
  "bar": "ABCDEFG",
  "baz": [52, 97]
}

Using this structure, the example inserts the first string and second number from the file onto the page.

If there is a syntax error in the JSON file, the request will usually fail silently. Avoid frequent hand-editing of JSON data for this reason.

If the specified URL is on a remote server, the request is treated as JSONP instead. See the discussion of the jsonp data type in $.ajax() for more details.

Examples:

Example: Loads the four most recent cat pictures from the Flickr JSONP API.

<!DOCTYPE html>
<html>
<head>
  <style>img{ height: 100px; float: left; }</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
	<div id="images">

</div>
<script>$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?",
        function(data){
          $.each(data.items, function(i,item){
            $("<img/>").attr("src", item.media.m).appendTo("#images");
            if ( i == 3 ) return false;
          });
        });</script>
</body>
</html>

Demo:

Example: Load the JSON data from test.js and access a name from the returned JSON data.

$.getJSON("test.js", function(json){
   alert("JSON Data: " + json.users[3].name);
 });

Example: Load the JSON data from test.js, passing along additional data, and access a name from the returned JSON data.

$.getJSON("test.js", { name: "John", time: "2pm" }, function(json){
    alert("JSON Data: " + json.users[3].name);
    });

Example: List the result of a consultation of pages.php in HTML as an array. By Manuel Gonzalez.



var id=$("#id").attr("value");
$.getJSON("pages.php",{id:id},dates);

function dates(datos) {
    
  $("#list").html("Name:"+datos[1].name+"<br>"+"Last Name:"+datos[1].lastname+"<br>"+"Address:"+datos[1].address);
}

Comments

Support requests, bug reports, and off-topic comments will be deleted without warning.
Please do post corrections or additional examples for jQuery.getJSON() below. We aim to quickly move corrections into the documentation.
If you need help, post at the forums or in the #jquery IRC channel.
Report bugs on the bug tracker or the jQuery Forum.
Discussions about the API specifically should be addressed in the Developing jQuery Core forum.

Kai Tønder
Hi,

My code :
jQuery.ajax({
url: 'applications/ajax.php',
type: 'GET',
dataType: 'application/json',
data: { "foo": "The quick brown fox jumps over the lazy dog.", "bar": "ABCDEFG", "baz" : { "test":1, "test2":2, "test3":3 } },

success: function(data){
jQuery("div#result").html(data);
}
});
```
Array
(
    [foo] => The quick brown fox jumps over the lazy dog.
    [bar] => ABCDEFG
    [baz] => [object Object]
)
```
Anyone know why the baz variable returns object Object, and is there a way to have it to return the actual array?

JorgeGodoy

There is something that changed from previous versions here.

For the following code:

jQuery.getJSON('/any/url',
{ 'conc':[0, 5, 10], 'reads':[0, 5, 10]});

One used to get a url such as "/any/url?conc=0&conc=5&conc=10&reads=0&reads=5&reads=10" but now with 1.4.1 we're getting something like "/any/url?conc[]=0&conc[]=5&conc[]=10&reads[]=0&reads[]=5&reads[]=10", so instead of variables with the correct names, now we have those extra brackets.

How can we revert to the old behavior?

Karl Swedberg

See jQuery.param().

Keo

For others that might be having trouble with the recent strict changes this {Animal:"DOG",Name:"Fido"} must now be {"Animal":"DOG","Name":"Fido"}.
Notice the extra quotes around the field names now that are required.

patbam

A useful tool for debugging JSON (pointed out by Paul in http://jquery14.com/day-10/jquery-1-4-hawtness-... ) is at:

http://jsonlint.com/

jQuery API