Sending JSON from backend to frontend

Question

I need some clarification on JSON objects. Inside my node backend, I receive a JSON object and after I'm done going through which key/value pairs I need, I send it off to the frontend. This is where I'm getting confused- I still need to turn that response object into json via response.json(). Why? If the backend is passing JSON, then why would I need to turn the response obj into JSON?

// test.js (node)

const testObj = {
    "test1": {
        "1": "Hello there"
   }
}


app.get('some-route', async(req,res) =>{
       res.send(testObj)
}

// front.js (React)

async someFunc(){
      const response = await fetch('/some-route');
      const data = await response.json(); //why?
}

Answer 1

Because on your front-end, the fetch API receives a buffer -- an array of bytes, which could contain any payload. It could be an image, plain text, a file, or a JSON payload.

Knowing what your back-end is going to send down, you need to receive the buffer of the data and then perform the .json() API on it, essentially asking that the buffer be interpreted as a serialized string representing a JSON object, and then having the Javascript engine evaluate (deserialize) that string into an object.

Fetch is a multi-purpose API that doesn't have any prior knowledge about the payload that the server is going to send. You are instructing it to treat the payload as JSON by using the .json() function.

Besides .json(), there are other helper methods to read and parse a variety of other possible response types; for example, .text() for plain text, .formData() for form encoded data (similar to querystring values), .blob(), and .arrayBuffer() for byte-level access to the returned data. You will use the appropriate method based on the response type that you're expecting from the API.

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

Answer 2

The response object isn't whatever you sent from the backend, it will be a Response object. That's how the Fetch API works. That Response object will have lots of metadata on it, and some methods, including .json which Takes a Response stream and reads it to completion. It returns a promise that resolves with the result of parsing the body text as JSON.

If you don't want to have to go through these two steps, just write this function.

const fetchJson = async url => {
    const response = await fetch(url)
    return response.json()
}

and use it like this:

async someFunc(){
      const data = await fetchJson('/some-route')
}