JQuery :: How to parse the JSON data received via ajax request?

In our previous article which was  JQuery :: How to stop form from getting submitted or how to capture the submit event? we discussed how we can stop  the form from getting submitted and how we can capture the submit event on a form. Today we will like to discuss on how we can parse the JSON data which get passed back from a ajax request.

The best way to get data from a server side script like php, .net is to get it in json format. The main reason for this is because once we get the data in JSON format we can directly use the javascript or JQuery functions to parse the data and do our deed in the same.

In order to pass the JSON data from a php script we use the “json_encode” function of php. We can pass in arrays of the data to the same function and php server side code converts the data passed to JSON format.

An example of the same is as follows:

<?php

$arr = array();

$country_id = array();

$country_name = array();

// add values to the Arrays as you want here…

echo json_encode(array(‘country_id’ => $country_id, ‘country_name’ => $country_name));

?>

Save the above file in your web server as “ajax/get_country.php”.

The above php code will create a json feed which can be called from a java script and parsed directory via the JQuery functions. In order to get the values from the server side php script via JQuery create a new javascript file and name it “select_box.js” and place it in js folder in the web directory.

Once it is placed in the directory add the following line of code to your page:

<script type=”text/javascript” src=”js/select_box.js”></script>

Add the following code to your newly created javascript file to let the browser know that it is a JQuery call.

$(document).ready(function() {

}

Now to call the server side php script to get the json value please add the follow code to the javascript file just created:

$(document).ready(function()

{

var target = “ajax/get_country.php”;

$.ajax({
url : target,
dataType: ‘json’,
type: ‘GET’,
data: data,
success: function(data, textStatus, XMLHttpRequest)
{
$.each(data, function(index, element)
{
$.each(element, function(index, element)
{
$(“#country”).append(“<option value=’” + element.country_id + “‘>” + element.country_name + “</option>”);
});
});
}
}
);

}

 

In the above javascript we are letting JQuery know that the data being received is in the JSON format with keyword “dataType: ‘json’,” which is passed during the call to the server side script. Once the server side data is received we are using the $.each loop to loop through the JSON data. The loop is used to fetch the country_id and country_name from the JSON data which is then appended to the select box with id as “country” in your HTML.

This is the easiest way to fetch data in JSON format and to parse and use the data directly via JQuery. All the rest intricacies are handled by JQuery itself.

We will keep updating our Jquery Tips section every 4 days, please subscribe to our feed and also share our articles on Facebook and Google Plus so other’s can benefit from our insight. Please feel free to send us your comments below, on how we can improve.