Fail to call a Json web service inside my asp.net mvc 4 application - asp.net-mvc

Question

I want to call the following webservice as mentioend on this link http://dev.joget.org/community/display/KB/JSON+API#JSONAPI-web%2Fjson%2Fworkflow%2Fprocess%2Flist
So inside my asp.net mvc view i wrote the folloiwng:-
<script type="text/javascript">
$(document).ready(function () {
// Send an AJAX request
$.getJSON("http://localhost:8080/jw/web/json/workflow/process/list?j_username=kermit&hash=9449B5ABCFA9AFDA36B801351ED3DF66&loginAs=admin",
function (data) {
// On success, 'data' contains a list of products.
$.each(data, function (key, val) {
// Format the text to display.
var str = val.id + ': $' + val.packageName;
// Add a list item for the product.
$('<li/>', { text: str })
.appendTo($('#products'));
});
});
});
</script>
<h1>The Processes are</h1>
<ul id="products"/>
But when i run the above web page no processes will be displayed under the <h1>The Processes are </h1> , while if i type the following http://localhost:8080/jw/web/json/workflow/process/list?j_username=kermit&hash=9449B5ABCFA9AFDA36B801351ED3DF66&loginAs=admin directly on the address-bar of my browser then all the processes will be displayed. so what might be going wrong ?
BR
-::::UPDATED::::-
i HAVE UPDATED MY JAVASCRIPT TO BE AS FOLLOW:-
$(document).ready(function(){
$.ajax({
type: "GET",
url: "http://localhost:8080/jw/web/json/workflow/package/list?loginAs=admin",
dataType: "JSONP",
contentType: "application/json; charset=utf-8",
success: function (data) {
$.each(data, function (key, val) {
// Format the text to display.
var str = val.packageId + ': $ ' + val.packageName;
// Add a list item for the product.
$('<li/>', { text: str })
.appendTo($('#products'));
});
}});
});
but the result of the web service call is returned as
undefined: $ undefined
instead of being something such as:-
{"activityId":"","processId":"289_process1"}
So what is the problem that is preventing my code from displaying the right data ?

Answer 1

Try specifying the JSONP callback parameter as callback=? at the end of your query string as explained in the documentation:
var url = 'http://localhost:8080/jw/web/json/workflow/process/list?j_username=kermit&hash=9449B5ABCFA9AFDA36B801351ED3DF66&loginAs=admin&callback=?';
$.getJSON(url, function (data) {
// On success, 'data' contains a list of products.
$.each(data, function (key, val) {
// Format the text to display.
var str = val.id + ': $' + val.packageName;
// Add a list item for the product.
$('<li/>', { text: str }).appendTo('#products');
});
});
UPDATE:
After showing your JSON (at last) the list of products is contained within a data property, so you need to adapt your $.each and operate on this property and not directly on the result:
{
"data": [
{
"packageName": "CRM",
"packageI‌​d": "crm"
},
{
"packageName": "EngineersAssociation",
"packageId": "EngineersAssociation"
},
{
"packageName": "LeaveApp",
"packageId": "leaveApp"
},
{
"packageName": "Newtest",
"packageId": "Newtest"
},
{
"p‌​ackageName": "TestApp",
"packageId": "testapp"
},
{
"packageName": "test54",
"packageId": "test5"
}
]
}
So adapt your code:
var url = 'http://localhost:8080/jw/web/json/workflow/process/list?j_username=kermit&hash=9449B5ABCFA9AFDA36B801351ED3DF66&loginAs=admin&callback=?';
$.getJSON(url, function (result) {
// On success, 'result.data' contains a list of products.
$.each(result.data, function (key, val) {
// Format the text to display.
var str = val.id + ': $' + val.packageName;
// Add a list item for the product.
$('<li/>', { text: str }).appendTo('#products');
});
});