Why is responseText undefined here?

Question

$.ajax({
  url: 'http://jsonplaceholder.typicode.com/posts/1',
  method: 'GET',
}).done(function(data){
  console.log(data);
  console.log(data.responseText);
});

Can anyone help me understand why console.log(data.responseText); is returning undefined?

http://clarkben.com/ajaxtesting/

Edit: OK so it looks like data is not a jqXHR object. If a assign the whole $.ajax statement to a variable then that variable is a jqXHR object so it can be accessed that way. I'm not sure why the data passed in to the function that is part of .done is not a jqXHR object though.

var theRequest = $.ajax({
    url: 'http://jsonplaceholder.typicode.com/posts/1',
    method: 'GET',
}).done(function(data){
        console.log(data);
        console.log(theRequest.responseText);
  });

Donative

is responseText a property of data? – Cruz

No but in my mind it should be because data is the jqXHR object that came back from the ajax request – Donative

Use your console to see all the properties of the data variable...I see 3..I also like your answer "In my mind it should be" – Cruz

OK so I've added dataType: 'text' and according to the official API doc "For backward compatibility with XMLHttpRequest, a jqXHR object will expose the following properties and method: responseXML and/or responseText when the underlying request responded with xml and/or text, respectively". But still, data does not contain the responseText property. I guess the question here is why is data not a proper jqXHR object? Is it something to do with promises maybe and how they work? – Donative

No, that's just the way it is designed. when you use .done, (or even the success callback,) the first argument is the parsed data. 9 times out of 10 (possibly even more often than that,) the parsed data is what you want, so it makes no sense for the xhr to be the first argument when the majority of times you won't use it. – Derryberry

Is this comment still true, even with your dataType: "text"? console.log(data); returns an object It was edited out of your question at some point. I question whether not it's actually an object, or if it's json and you're just mis-interpreting it as being an object. – Derryberry

I removed that line after I edited it to add dataType: 'text'. Maybe you're right, maybe I think data is a jqXHR object when actually it's JSON – Donative

OK so it looks like data is not a jqXHR object. If a assign the whole $.ajax to a variable then that variable is a jqXHR so it can be accessed that way. – Donative

@KevinB I feel like I'm close to understanding this. I just need help understanding why the object passed in to the function within the .done() call is not a jqXHR object as expected. Can you assist at all? – Donative

Why do you expect it to be? That's not how it is documented. – Derryberry

If you feel it should be and want to know why the jquery devs chose to do it that way, you'll have to ask them instead. – Derryberry

Clearly I'm struggling to understand the documentation. $.ajax doc clearly states that it returns the jqXHR object. The .done() doc doesn't explain it - but it does give an example using $.get which, like $.ajax is said to return the jqXHR object, and works when put together like I have. – Donative

I have since found the answer from the documentation for jqXHR: "jqXHR.done(function( data, textStatus, jqXHR ) {});". See my answer posted. – Donative

it returns a jqXHR. the promise is a jqXHR. – Derryberry

Answer 1

OK so eventually I found the answer in the jqXHR documentation:

jqXHR.done(function( data, textStatus, jqXHR ) {});

An alternative construct to the success callback option, the .done() method replaces the deprecated jqXHR.success() method. Refer to deferred.done() for implementation details.

So now the below code works:

$.ajax({
    url: 'http://jsonplaceholder.typicode.com/posts/1',
    method: 'GET',
}).done(function(data, textStatus, jqXHR){
        console.log(data);
        console.log(jqXHR.responseText);
  });

Got there in the end!

Donative

Answer 2

By default, jQUery try to guess the type of a response. If the headers of the response is application/json, data will be a javascript object. If this is something like text/html or text/plain, data will be a simple string containing the body of the response.

And data.responseText is obviously undefined if you call that on a string (or a javascript object with no property responseText)

See the jQuery ajax documentation : http://api.jquery.com/jquery.ajax/

jqXHR.done(function( data, textStatus, jqXHR ) {});

The first parameter is data. If you want the jqXHR, this is the third parameter.

Propylite

OK so it looks like data is not a jqXHR object. If a assign the whole $.ajax to a variable then that variable is a jqXHR so it can be accessed that way. – Donative

do you know why the data passed in to the function that is part of .done is not a jqXHR object as expected? – Donative

Answer 3

Data is this:

{
  "userId": 1,
  "id": 1,
  "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
  "body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
}

That is probably why data is an object, and jQuery interprets it as such. That is why data.responseText returns undefined; responseText is not an attribute of the object

Barefoot

Oh right yeah... I was thinking of when you print it onscreen and you have [Object object] or something equivalent... let me just fix that – Barefoot

So data is not a jqXHR object then? It's actually a different kind of object? – Donative

OK so it looks like data is not a jqXHR object. If a assign the whole $.ajax to a variable then that variable is a jqXHR so it can be accessed that way. – Donative

It might be because of the headers on the page your accessing with the request... By it saying that the response is a Json object, perhaps it overrides the jqXHR object? – Barefoot