Question

I want to call a web service that returns JSON object, the web service specification is as mentioned in the following link:

http://dev.joget.org/community/display/KB/JSON+API#JSONAPI-web%2Fjson%2Fworkflow%2Fpackage%2Flist

I have a simple view inside my asp.net mvc3 web application as follows:

@{
    ViewBag.Title = "Home Page";
}
   <script src="@Url.Content("~/Scripts/f.js")" type="text/javascript"></script>


<h2>@ViewBag.Message</h2>
<p>
    To learn more about ASP.NET MVC visit <a href="http://asp.net/mvc" title="ASP.NET MVC Website">http://asp.net/mvc</a>.
</p>
<h1>The Processes are </h1>

<ul id="products"/>

and the following f.js to call the web service and display the returned JSON data:

$(document).ready(function() {
    $.ajax({
        type: 'GET',
        url: 'http://localhost:8080/jw/web/json/workflow/package/list?loginAs=admin',
        dataType: 'json',
        success: function(data) {
            $.each(data, function(key, val) {
                alert("jsonData");
                // 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 problem is that when I navigate to the view nothing will be displayed on the view as a result of the AJAX call, bearing in mind that if I manually type the URL: ‘http://localhost:8080/jw/web/json/workflow/package/list?loginAs=admin’ in the address-bar of my browser then the results will be displayed inside the browser successfully?

So what might be going wrong?

:::UPDATED:::

I updated my JavaScript to the following:

$(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:

 {"activityId":"","processId":"289_process1"}

So what is the problem that is preventing my code from displaying the right data?

Answer 1

I modify my JavaScript code to the following:-

//code goes here
success: function(result) {
$.each(result.data, function(key, val) {

//code goes here