Iced Tea Labs Share to be shared

Parse JSON in JavaScript

In the previous post ( [Android] Parse JSON in Android ), I showed how to get the JSON string from server and parse it into desired object using Java. This time, in this tutorial, I’ll parse JSON in JavaScript. This can be applied when you develop an mobile application using PhoneGap.

A - jQuery.getJSON() method

JQuery provides a method call getJSON() to load the JSON encoded data from server using GET method.


jQuery.getJSON( url [, data ] [, success( data, textStatus, jqXHR ) ] )

The getJSON() method above is equivalent to below ajax method:

  dataType: "json", 
  url: url, 
  data: data, 
  success: success 

 Remember to enconde all the data before submit to server side. Because they will be appended to the URL string.

B - Parse JSON in JavaScript demo

About the appearance, this demo is one HTML page with only one button - Demo getJSON()

When you click on the button, it’ll show the result. Simple, right?

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" ""> 
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type"> 
    <meta content="utf-8" http-equiv="encoding"> 
    <script type="text/javascript" src=""></script> 
    <title>Demo JSON</title> 
    <script type="text/javascript"> 
        function demoClick(){             
            var flickerAPI = ""; 
              $.getJSON( flickerAPI, { 
                tags: "mount rainier", 
                tagmode: "any", 
                format: "json" 
              }, function( data ) { 
                  $.each( data.items, function( i, item ) { 
                    $( "<img>" ).attr( "src", ).appendTo( "#images" ); 
                    if ( i === 3 ) { 
                      return false; 

    <button id='btn_get' onclick='demoClick();' type="button">Demo getJSON()</button> 
    <div id="images"></div> 



In this demo, I use a web service of Flickr that will return a list of public content matching some criteria.

This post has no images LOL =))

Done for today!

The whole source code is already in this post so I won’t upload it :)


comments powered by Disqus