Understanding JavaScript responses

Question

I am using the following PHP code to respond to a JavaScript fetch() request.

$json = json_encode(array(
    'status' => 200,
    'resources' => $dataObj
));

http_response_code(200);
header('Content-Type: application/json');
echo $json;
exit;

Back in my JavaScript code, after I get the response, I can do the following:

console.log(response.status);
console.log(response.resources);
console.log(JSON.stringify(response.resources));

The first line works and shows a value of 200. The other lines display undefined.

Now, if I add response.json() before my code, all three console lines show correctly.

let resp = await response.json();
console.log(resp.status);
console.log(resp.resources);
console.log(JSON.stringify(resp.resources));

My question is: Why in the first example can I correctly see the status of 200, but I need to use the json() function in order to see the data object?

Because that's how it works. developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch — Dave Newton
– Dave Newton, Commented Jul 31, 2017 at 16:07
You're mixing up the status code which comes back from all http requests with the status property you manually add to your json response. — Jamiec
– Jamiec, Commented Jul 31, 2017 at 16:10
@Jamiec Oh no, you are correct. That is exactly what I was doing. Thank you! — kojow7
– kojow7, Commented Jul 31, 2017 at 16:18

Jamiec · Accepted Answer · 2017-07-31 16:13:07Z

1

When you make an http request - any http request - you will get back a status code. This is available on the response object.

You have also sent a status property as part of your response body, and until you explicitly tell your code to read the response body as json (response.json()) you wont be able to read any of your custom response.

So, basically, the status you can read is the one sent back by the server - not the one on your json.

answered Jul 31, 2017 at 16:13

Jamiec

136k15 gold badges143 silver badges202 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

kojow7 Over a year ago

Thank you. Your comment under my question made everything clear. I did not realize there were two 'status' properties at play here.

malifa · Accepted Answer · 2017-07-31 16:15:00Z

1

If you're using the Fetch API you will always get an object back which you don't need to parse. It's already an object literal, specifically a https://developer.mozilla.org/en-US/docs/Web/API/Response.

This object has a property called status which returns 200 in your first case.

If you do however call the method json() on this object, it will parse the body of your response, not the whole thing. In this body you have your status from the backend not the status of the Response.

That's why let resp = await response.json() will return you your actual response data with your resources and such.

answered Jul 31, 2017 at 16:15

malifa

8,1552 gold badges44 silver badges57 bronze badges

Comments

Jonas Wilms · Accepted Answer · 2017-07-31 16:14:55Z

0

the response is actuallay a string:

  "{'status':200,'resources':'sth'}"

and that string hasnt a resources property. You first need to parse it to an object literal.

To clear up some confusion:

The server sends a full response, so the upper is just the body , while a http response also consists of a header. If you do:

response.status

thats actually the headers status.

edited Jul 31, 2017 at 16:14

answered Jul 31, 2017 at 16:08

Jonas Wilms

139k20 gold badges164 silver badges164 bronze badges

3 Comments

malifa Over a year ago

That's not the reason. In this case obj.status would return an error. beacuse as you said, it's just a string...

Jonas Wilms Over a year ago

@lexith no thats not the jsons .status but the headers status info

malifa Over a year ago

i think we are miscommunicating ;) The response is not a string. It's a response object, that's why response.status works but his resources are actually in the body of the response object which need to be parsed first with response.json()

Collectives™ on Stack Overflow

Understanding JavaScript responses

3 Answers 3

1 Comment

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related