Can anyone find out what is the error in this code? Im trying to make a call to my API Controller which returns JsonObject. It hits the controller and result is shown in the Chrome > preview. However, when I try to access on success function, it shows undefined.

$(document).ready(function () {

CallService();
});

function CallService() {
 $.ajax({
    type: "GET",
    url: "http://localhost:8080/Java/Controller/Method",
    contentType: "application/json; charset=utf-8",
    dataType: "script",
    success: function (data) {

        alert('success '+ data);

    },
    error: function (data) {
        alert('error ' + data);
    }
 });
}

Interestingly, I only able hit the controller if I put my dataType: "script". In the case of json or jsonp. I couldnt hit event hit the controller.

EDIT

Console log on using dataType : "jsonp"

  object {readyState: 4, getResponseHeader: function, getAllResponseHeaders: function,     setRequestHeader: function, overrideMimeType: function…}
  abort: function (a){var b=a||u;return i&&i.abort(b),x(0,b),this}
  always: function (){return e.done(arguments).fail(arguments),this}
  plete: function (){if(h){var d=h.length;!function f(b){n.each(b,function(b,c){var d=n.type(c);"function"===d?a.unique&&k.has(c)||h.push(c):c&&c.length&&"string"!==d&&f(c)})}(arguments),b?e=h.length:c&&(g=d,j(c))}return this}
  done: function (){if(h){var d=h.length;!function f(b){n.each(b,function(b,c){var d=n.type(c);"function"===d?a.unique&&k.has(c)||h.push(c):c&&c.length&&"string"!==d&&f(c)})}(arguments),b?e=h.length:c&&(g=d,j(c))}return this}
   error: function (){if(h){var d=h.length;!function f(b){n.each(b,function(b,c){var d=n.type(c);"function"===d?a.unique&&k.has(c)||h.push(c):c&&c.length&&"string"!==d&&f(c)})}(arguments),b?e=h.length:c&&(g=d,j(c))}return this}
   fail: function (){if(h){var d=h.length;!function f(b){n.each(b,function(b,c){var d=n.type(c);"function"===d?a.unique&&k.has(c)||h.push(c):c&&c.length&&"string"!==d&&f(c)})}(arguments),b?e=h.length:c&&(g=d,j(c))}return this}
  getAllResponseHeaders: function (){return 2===t?f:null}
  getResponseHeader: function (a){var b;if(2===t){if(!j){j={};while(b=Dc.exec(f))j[b[1].toLowerCase()]=b[2]}b=j[a.toLowerCase()]}return null==b?null:b}
  overrideMimeType: function (a){return t||(k.mimeType=a),this}
  pipe: function (){var a=arguments;return n.Deferred(function(c){n.each(b,function(b,f){var g=n.isFunction(a[b])&&a[b];e[f[1]](function(){var a=g&&g.apply(this,arguments);a&&n.isFunction(a.promise)?a.promise().done(c.resolve).fail(c.reject).progress(c.notify):c[f[0]+"With"](this===d?c.promise():this,g?[a]:arguments)})}),a=null}).promise()}
   progress: function (){if(h){var d=h.length;!function f(b){n.each(b,function(b,c){var d=n.type(c);"function"===d?a.unique&&k.has(c)||h.push(c):c&&c.length&&"string"!==d&&f(c)})}(arguments),b?e=h.length:c&&(g=d,j(c))}return this}
   promise: function (a){return null!=a?n.extend(a,d):d}
   readyState: 4
   setRequestHeader: function (a,b){var c=a.toLowerCase();return t||(a=s[c]=s[c]||a,r[a]=b),this}
   state: function (){return c}
   status: 200
   statusCode: function (a){var b;if(a)if(2>t)for(b in a)q[b]=[q[b],a[b]];else v.always(a[v.status]);return this}
   statusText: "success"
   success: function (){if(h){var d=h.length;!function f(b){n.each(b,function(b,c){var d=n.type(c);"function"===d?a.unique&&k.has(c)||h.push(c):c&&c.length&&"string"!==d&&f(c)})}(arguments),b?e=h.length:c&&(g=d,j(c))}return this}
   then: function (){var a=arguments;return n.Deferred(function(c){n.each(b,function(b,f){var g=n.isFunction(a[b])&&a[b];e[f[1]](function(){var a=g&&g.apply(this,arguments);a&&n.isFunction(a.promise)?a.promise().done(c.resolve).fail(c.reject).progress(c.notify):c[f[0]+"With"](this===d?c.promise():this,g?[a]:arguments)})}),a=null}).promise()}
   __proto__: Object

Can anyone find out what is the error in this code? Im trying to make a call to my API Controller which returns JsonObject. It hits the controller and result is shown in the Chrome > preview. However, when I try to access on success function, it shows undefined.

$(document).ready(function () {

CallService();
});

function CallService() {
 $.ajax({
    type: "GET",
    url: "http://localhost:8080/Java/Controller/Method",
    contentType: "application/json; charset=utf-8",
    dataType: "script",
    success: function (data) {

        alert('success '+ data);

    },
    error: function (data) {
        alert('error ' + data);
    }
 });
}

Interestingly, I only able hit the controller if I put my dataType: "script". In the case of json or jsonp. I couldnt hit event hit the controller.

EDIT

Console log on using dataType : "jsonp"

  object {readyState: 4, getResponseHeader: function, getAllResponseHeaders: function,     setRequestHeader: function, overrideMimeType: function…}
  abort: function (a){var b=a||u;return i&&i.abort(b),x(0,b),this}
  always: function (){return e.done(arguments).fail(arguments),this}
  plete: function (){if(h){var d=h.length;!function f(b){n.each(b,function(b,c){var d=n.type(c);"function"===d?a.unique&&k.has(c)||h.push(c):c&&c.length&&"string"!==d&&f(c)})}(arguments),b?e=h.length:c&&(g=d,j(c))}return this}
  done: function (){if(h){var d=h.length;!function f(b){n.each(b,function(b,c){var d=n.type(c);"function"===d?a.unique&&k.has(c)||h.push(c):c&&c.length&&"string"!==d&&f(c)})}(arguments),b?e=h.length:c&&(g=d,j(c))}return this}
   error: function (){if(h){var d=h.length;!function f(b){n.each(b,function(b,c){var d=n.type(c);"function"===d?a.unique&&k.has(c)||h.push(c):c&&c.length&&"string"!==d&&f(c)})}(arguments),b?e=h.length:c&&(g=d,j(c))}return this}
   fail: function (){if(h){var d=h.length;!function f(b){n.each(b,function(b,c){var d=n.type(c);"function"===d?a.unique&&k.has(c)||h.push(c):c&&c.length&&"string"!==d&&f(c)})}(arguments),b?e=h.length:c&&(g=d,j(c))}return this}
  getAllResponseHeaders: function (){return 2===t?f:null}
  getResponseHeader: function (a){var b;if(2===t){if(!j){j={};while(b=Dc.exec(f))j[b[1].toLowerCase()]=b[2]}b=j[a.toLowerCase()]}return null==b?null:b}
  overrideMimeType: function (a){return t||(k.mimeType=a),this}
  pipe: function (){var a=arguments;return n.Deferred(function(c){n.each(b,function(b,f){var g=n.isFunction(a[b])&&a[b];e[f[1]](function(){var a=g&&g.apply(this,arguments);a&&n.isFunction(a.promise)?a.promise().done(c.resolve).fail(c.reject).progress(c.notify):c[f[0]+"With"](this===d?c.promise():this,g?[a]:arguments)})}),a=null}).promise()}
   progress: function (){if(h){var d=h.length;!function f(b){n.each(b,function(b,c){var d=n.type(c);"function"===d?a.unique&&k.has(c)||h.push(c):c&&c.length&&"string"!==d&&f(c)})}(arguments),b?e=h.length:c&&(g=d,j(c))}return this}
   promise: function (a){return null!=a?n.extend(a,d):d}
   readyState: 4
   setRequestHeader: function (a,b){var c=a.toLowerCase();return t||(a=s[c]=s[c]||a,r[a]=b),this}
   state: function (){return c}
   status: 200
   statusCode: function (a){var b;if(a)if(2>t)for(b in a)q[b]=[q[b],a[b]];else v.always(a[v.status]);return this}
   statusText: "success"
   success: function (){if(h){var d=h.length;!function f(b){n.each(b,function(b,c){var d=n.type(c);"function"===d?a.unique&&k.has(c)||h.push(c):c&&c.length&&"string"!==d&&f(c)})}(arguments),b?e=h.length:c&&(g=d,j(c))}return this}
   then: function (){var a=arguments;return n.Deferred(function(c){n.each(b,function(b,f){var g=n.isFunction(a[b])&&a[b];e[f[1]](function(){var a=g&&g.apply(this,arguments);a&&n.isFunction(a.promise)?a.promise().done(c.resolve).fail(c.reject).progress(c.notify):c[f[0]+"With"](this===d?c.promise():this,g?[a]:arguments)})}),a=null}).promise()}
   __proto__: Object

• javascript
• jquery
• ajax
• json

Share Improve this question Follow edited May 10, 2014 at 7:03 user2412230 asked May 10, 2014 at 6:16 user2412230user2412230 6322 silver badges99 bronze badges 12

• remove dataType: "script", and try – Gaurang s Commented May 10, 2014 at 6:18
• Then I get error [Object Object] – user2412230 Commented May 10, 2014 at 6:19
• Are you running this from http://localhost:8080 ? If not, you might be running into Cross-Origin problems. – Félix Saparelli Commented May 10, 2014 at 6:19
• yes. Im currently running on localhost:8080 – user2412230 Commented May 10, 2014 at 6:20
• You need to access sucess data with your jsonObject name which is given in your controller. i.e. data['jsonObjectNname'][0].jsonAttributeName; – Harshal Patil Commented May 10, 2014 at 6:20

 |  Show 7 more ments

3 Answers 3

Sorted by: Reset to default 2

function CallService() {
  $.ajax({
  type: "GET",
  url: "http://localhost:8080/Java/Controller/Method",
  contentType: "application/json; charset=utf-8",
  success: function (data) {
    data = jQuery.parseJSON(data.d)
    alert('success '+ data[0].yourvalues);

  },
  error: function (data) {
    alert('error ' + data);
}
});
}

You have the Object in your AJAX success method. Then you could bind the datas from response.

For your reference here i attached the simple JSONP response from the server and bind the values in our UserInterface.

$.ajax({
type: 'GET',
url: 'http://githubbadge.appspot./Jebasuthan',
dataType: 'jsonp',
success: function (json) {
    console.log(json);
    var result = '<h3>Name: ' + json.user.login + '</h3>' +
                 '<p>Forked Repository: ' + json.fork_repos + '</p>' +
                 '<p>Languages: ' + json.languages + '</p>' +
                 '<p>Email-Id: ' + json.user.email + '</p>' +
                 '<p>Location: ' + json.user.location + '</p>' +
                 '<p>Last Updated Date: ' + json.user.updated_at + '</p>' +
                 '<p>Blog: <a target="_blank" href=' + json.user.blog + '>' + json.user.blog + '</a></p>';
      $('#badge').append(result);
  }
});

Demo

Try this:

console.log(data);

It shows jsonObject in your console.

If you wanted to alert data then try this:

alert(data.jsonObectName[index].attributeName);

here index is object index i.e. start with 0. and attribute name is your value name in object

$.ajax({
type: "GET",
url: "http://localhost:8080/Java/Controller/Method",
contentType: "application/json; charset=utf-8",
dataType: "script",
success: function (data) {
    console.log(data);
    alert('success '+ data.jsonObectName[index].attributeName);

},
error: function (data) {
    console.log(data);
    alert('error ' + data.jsonObectName[index].attributeName);
}

});