Express response.send() object not received by JavaScript fetch() … why?

Question

Documentation from Express response.send allows for objects to be sent in the body, which I am sending as follows:

  DBM.saveArticle(obj).then((val) => {
    console.log(val); // verified here
    res.send(val);
    res.end();
    // ... clip here

However on the client I am not getting the object. This is a Create in CRUD, and I am using fetch POST as follows to implement this.

    // ... snip
    const options = { 
      headers: {'Content-Type': 'application/json'}, 
      method: 'POST', 
      body: JSON.stringify(this.state)
    };    
    fetch("/articles/add", options)
      .then((response) => {
        console.log('DEBUG: Article Added: ', response); // nothing found here in response
        this.props.dispatch({type: 'addArticle', component_state: state});
      })
      .catch((error) => {
        console.log('fetch/POST error', error);
      });
      // ... snip

console.log from above looks like this, here is a pic, it is empty, as far as I can tell.

The response object is big, and I tried to click all about it, but it is possible I might have missed something.

The official docs for JavaScript fetch response object is here on MDN .

Answer 1

https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch#Response_objects

This is just an HTTP response, not the actual JSON. To extract the JSON body content from the response, we use the json() method (defined on the Body mixin, which is implemented by both the Request and Response objects.)

https://developer.mozilla.org/en-US/docs/Web/API/ReadableStream

The Fetch API offers a concrete instance of a ReadableStream through the body property of a Response object.

fetch returns the body as a ReadableStream to convert it to a JSON use response.json()

fetch('https://example.com/profile', {
  method: 'POST', // or 'PUT'
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify(data),
})
.then(response => response.json())   // << this will convert the response to JSON object
.then(data => {
  console.log('Success:', data);
})
.catch((error) => {
  console.error('Error:', error);
});

The data in the ReadableStream is not accessible without consuming the stream, it's stored in a lower-level I/O source, called the underlying source, and there are two types of underlying source: push and pull sources.

In case of HTTP request it's a push source in the form of a TCP socket, where data is constantly being pushed from the OS level, and the data will be accessible to the consumer (your code) once you acquire a lock and start reading it, which is exactly what json() method do for you.

refer to this for more details https://streams.spec.whatwg.org/#rs-model

Answer 2

You need to use response.json() .

json() is part of the body mixin of the fetch api. You need to be familiar with these methods to successfully use both Request and Response objects.

https://developer.mozilla.org/en-US/docs/Web/API/Body