I am trying to invoke a live web service in Json Format -
{"GetAllBookingsResult":[{"BookingID":47,"CaseID":0,"Id":0,"ava":0,"inspectionDate":"Wednesday, December 30, 2015","inspectionRemarks":"okokokoko","inspectionTime":"06: 00 PM - 07: 30 PM","selectedDate":null,"value":null},{"BookingID":48,"CaseID":0,"Id":0,"ava":0,"inspectionDate":"Wednesday, December 30, 2015","inspectionRemarks":"okijijoubibiuyv8","inspectionTime":"04: 30 PM - 05: 30 PM","selectedDate":null,"value":null},{"BookingID":50,"CaseID":0,"Id":0,"ava":0,"inspectionDate":"Wednesday, December 30, 2015","inspectionRemarks":"joy2","inspectionTime":"04: 30 PM - 05: 30 PM","selectedDate":null,"value":null},{"BookingID":51,"CaseID":0,"Id":0,"ava":0,"inspectionDate":"update","inspectionRemarks":"update","inspectionTime":"update","selectedDate":null,"value":null},{"BookingID":53,"CaseID":0,"Id":0,"ava":0,"inspectionDate":"Wednesday, December 30, 2015","inspectionRemarks":"kjbkhbj","inspectionTime":"12: 30 PM - 01: 30 PM","selectedDate":null,"value":null},{"BookingID":54,"CaseID":0,"Id":0,"ava":0,"inspectionDate":"Wednesday, December 30, 2015","inspectionRemarks":"okokmokm","inspectionTime":"02: 30 PM - 03: 30 PM","selectedDate":null,"value":null},{"BookingID":55,"CaseID":0,"Id":0,"ava":0,"inspectionDate":"Wednesday, December 30, 2015","inspectionRemarks":"JESUS MAN ","inspectionTime":"02: 30 PM - 03: 30 PM","selectedDate":null,"value":null},{"BookingID":58,"CaseID":0,"Id":0,"ava":0,"inspectionDate":"Wednesday, December 30, 2015","inspectionRemarks":"new update","inspectionTime":"12: 30 PM - 01: 30 PM","selectedDate":null,"value":null},{"BookingID":59,"CaseID":0,"Id":0,"ava":0,"inspectionDate":"Thursday, December 24, 2015","inspectionRemarks":"heheheh","inspectionTime":"02: 30 PM - 03: 30 PM","selectedDate":null,"value":null},{"BookingID":60,"CaseID":0,"Id":0,"ava":0,"inspectionDate":"Tuesday, December 29, 2015","inspectionRemarks":"tESTINGLDFNGLSDNGFLJKDFNG","inspectionTime":"12: 30 PM - 01: 30 PM","selectedDate":null,"value":null}]}
This is my AJAX call in my Javascript
<script type="text/javascript">
$(document).on(function () {
var GetAllBookings = function () {
$.ajax({
type: "GET",
url: 'http://localhost:41014/WsRepCatalog.svc',
contentType: "json",
dataType: "json",
success: function (data) {
$('#tbBookings').show();
var response = data.GetAllBookingsResult;
$.each(reponse, function (key, value) {
//stringify
var jsonData = JSON.stringify(value);
//Parse JSON
var objData = $.parseJSON(jsonData);
var BookingID = objData.BookingID;
var inspectionDate = objData.inspectionDate;
var inspectionTime = objData.inspectionTime;
var inspectionRemarks = objData.inspectionRemarks;
$('<tr><td>' + BookingID + '</td><td>' + inspectionDate + '</td><td>'
+ inspectionTime + '</td><td>' + inspectionRemarks +
'</td></tr>').appendTo('#tbBookings');
});
},
error: function (xhr) {
alert(xhr.responseText);
}
});
}
});
</script>
This is where i want to display the data in a table format.
<form onload="GetAllBookings()">
<p>List of Bookings</p>
<table border="1" id="tbBookings">
</table>
</form>
But I can't seem to get it as no data appear. Much help needed, thank you!
<form onload="GetAllBookings()">
Here you are trying to call GetAllBookings when the load event fires on the form.
Your first problem is that forms do not load content from a URL so there is no load event on them.
Your second problem is that when you defined GetAllBookings you did so here:
$(document).on(function () { var GetAllBookings = function () {
… inside another function, so it is not a global.
You're also passing a function as the first argument to on but it makes no sense to so.
ready event handlerSuch:
$(function () {
$.ajax({
type: "GET",
url: 'http://localhost:41014/
And so on.
Note you are using an absolute URL so it is possible you are going to run cross origin issues. Look at the Console in your developer tools. Read the error messages (if there are any). Search Google to find out what they mean.
The given function will get the data from service in json format and in datatable_creationCallBack function you can iterate the response and fetch into HTML table
function initial_table_creation(){
var objectForPost = null;
var contentType = 'application/json; charset=utf-8';
var servletPath = 'http://localhost:41014/WsRepCatalog.svc';
var method = "GET";
jQAjaxCallForAccountJSON(servletPath, method, contentType,
objectForPost, 'datatable_creationCallBack');
}
function datatable_creationCallBack(resultobject){
var table_head=null,table_body=null;
var jndx=1;
for(var i=0;i<resultobject.appstatus.length;i++){
table_head="<thead><tr><th>S.No</th><th>Title</th><th>Message</th><th>BranchName</th><th>Exported Datetime</th></tr></thead>";
table_body=table_body+"<tr><td>"+jndx+"</td><td>"+resultobject.appstatus[i].type+"</td><td>"+resultobject.appstatus[i].message+"</td>" +
"<td>"+resultobject.appstatus[i].branchName+"</td><td>"+resultobject.appstatus[i].exportedTime+"</td></tr>";
jndx++;
}
$("#appdatas").html(table_head+"<tbody>"+table_body+"</tbody>");
}
function jQAjaxCallForJSON(servletPath, method, contentType, objectForPost,
callBack) {
var dataInJSON = '';
if (objectForPost == null) {
objectForPost = {};
}
if ('DELETE' != method) {
dataInJSON = JSON.stringify(objectForPost);
$.ajax({
async : true,
url : servletPath,
type : method,
crossDomain : true,
beforeSend : function(jqXHR) {
jqXHR.setRequestHeader("Content-type", contentType);
},
data : dataInJSON,
dataType : 'json',
processData : false,
statusCode : {
401 : function() {
window.location = path + '/index.jsp';
}
},
success : function(resultObject) {
var callBackfunction = window[callBack];
callBackfunction(resultObject);
},
error : function(xhr, ajaxOptions, thrownError) {
/*console.info('server error');*/
}
});
}
}