Parsing JSON from jQuery Ajax Request

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.

Livewire Component Library

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]+" ");
				});
				});
			}
		});
	});
Amazon Shopping

Site Footer