0

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}
  complete: 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
Improve this question
12
  • remove dataType: "script", and try Commented May 10, 2014 at 6:18
  • Then I get error [Object Object] 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. Commented May 10, 2014 at 6:19
  • yes. Im currently running on localhost:8080 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; Commented May 10, 2014 at 6:20

3 Answers 3

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);
}
});
}
Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

I couldnt hit my API controller if I remove the dataType: "script"
what if you add dataType: json,
It doesnt even hit my controller
I found the bug. Im running my static html pages directly from desktop. Running it as another web project fixed the problem.
2

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.com/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

Improve this answer

6 Comments

My API controller will return the JsonString which I need to access it. Im able to hit my controller but I cant access the return value on success function
@user2412230, I amy ajax call success method console.log i had object. You can check your browser console.log, You have the Objects with values from your service. First you have to check the Response data. Then you have to bind the data from the response like what i did. Otherwise you can share your console.log(data) from your browser. That could help us to find the issue. I will help you to how to bind the data from ajax call success method
I tried using dataType: "jsonp" and I got error - console.log
Ill add my console log to this post
I found the bug. Im running my static html pages directly from desktop. Running it as another web project fixed the problem.
|
2

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);
}

});

Improve this answer

4 Comments

This is my success: function (data) { alert("success " + data.ob[0].te name); }
I get this error "Uncaught SyntaxError: Unexpected identifier"
Can you Paste console log here
function (data) { alert("success " + data.ob[0].te); } try this

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.