5 Balloons

This post shows the examples of parsing a JSON from a jQuery ajax call.

1. SimpleJSON

[
{
customer_id:"1",
customer_name: "Jim"
},
{
customer_id:"2",
customer_name: "Joe"
}
]

Following is the AJAX call to parse the simple JSON data from the service

$('#ajax1').click(function(){
    $.ajax({
        url: "http://www.mocky.io/v2/54be41e83792d53a0ba6d5f3",
        dataType: "jsonp",
        success: function(result, status){
            $('#result1').append("Status of the rest service is "+ status); 
            $.each(result,function(index){
                 $('#result1').append("
"+result[index].customer_id+" -- "+result[index].customer_name);
            });
        }
    });
});

Note : I have used dataType as jsonp since , the the service I am fetching data from is on another domain.

2. Complex JSON

{
 "employee": [{
   "firstName": "John",
   "LastName": "LaPhon",
   "phoneNumber": ["7046996952", "7897786677"]
  },
  {
   "firstName": "User",
   "LastName": "Test",
   "phoneNumber": ["23246952", "932423219"]
  }
 ]
}

Following is the ajax call to parse above JSON request

$('#ajax2').click(function(){
 $.ajax({
  url : 'http://www.mocky.io/v2/54bf7334a84e11cc06149872',
  dataType : "jsonp",
  success : function(result, status){
   var employees = result.employee;
   $.each(employees,function(index){
    $('#result2').append("
"+employees[index].firstName+" -- "+employees[index].LastName);
    var phoneNumbers = employees[index].phoneNumber;
    $.each(phoneNumbers, function(j){
        $('#result2').append(" "+phoneNumbers[j]+" ");
    });
    });
   }
  });
 });