To read JSON data with jQuery

by Bhumi // Dec 5,2012 // No comment

In this short and informative post, I am going to explain how to parse the JSON string using jQuery. JSON stands for a JavaScript Object Notation which is a data exchange format and human-readable data. Every object in JSON is stored with curly braces { } and an array is stored with brackets[ ].

Well, I am going to show two ways to read/parse JSON data with using the jQuery.

1. jQuery method for JSON DataType

In this method,You have to set the data type parameter as “json” in the AJAX request and the data will be directly parsed in your success callback and you are use those datas.

Let’s see the SYNTAX:


dataType: "json"

1 2	dataType: "json"

Now, let’s use this syntax into code:


 jQuery.ajax({
	  url: full_url,			   
	  dataType: "json",
	  success: function(results) {
		alert(result.name); 
// json data like {"name":"CreativeDev"}
      }
 });

jQuery.ajax({

url: full_url,

dataType: "json",

success: function(results) {

alert(result.name);

// json data like {"name":"CreativeDev"}

}

});

Normally, you can use the dataType ‘json’ and leave it up to jQuery to do it for you.

2. jQuery method to parse JSON objects.

jQuery provides an another method “parseJSON”, which takes a well-formed JSON string and returns the resulting JavaScript object.

Let’s take a look at SYNTAX:


data = $.parseJSON(string);

1 2	data = $.parseJSON(string);

Let’s look at what exactly JSON parsing:


 jQuery.ajax({
    url: dataURL,			   
    success: function(results) {
    var parsedJson = jQuery.parseJSON(results);    	              
	        alert(parsedJson.name); // alerts name value
	}
 });

jQuery.ajax({

url: dataURL,

success: function(results) {

var parsedJson = jQuery.parseJSON(results);

alert(parsedJson.name); // alerts name value

}

});

As you can see, Here I have used parseJSON which parse the JSON String into object so here you can not directly get value, you need to use object to get the parsed value.

However,JSON is quite simple and easy to read and once you get used to the curly braces and brackets, not too hard to encode in PHP so you can use any of above method to parse the jQuery.

Thanks for reading and feel free to share your thoughts! Don’t Forget to Follow us on Twitter or Subscribe us to Get the Latest Updates.

Jquery Tabs in wordpress without plugin

Before today, I was using plugin for add tabbing in wordpress. but today I have tried one thing to use tabbing in wordpress without plugin READ MORE

jQuery Shake Effect Explained

Recently someone asked me that, I want that vibrate effect which you can see in some site as advertisement. In some site, advertisement comes with READ MORE

Solution:Uncaught ReferenceError $ is not defined in WordPress

As you all know, new version of WordPress (3.5) includes its own version of jquery, which has been rigorously tested with WP and many of READ MORE

jQuery Cookie Explained

jQuery provides a plugin which you can use with the jQuery library itself and you can easily store and access cookies. Before we begin, lets READ MORE

JQuery Animation Explained

jQuery is a JavaScript framework which intends to easily develope interactive web sites and user interfaces with a few lines of code.jQuery animate is quite READ MORE