Why we need to convert object to JSON when we send data to back-end server?

Question

I only knew that we get the data from back-end server as JSON format. First, why back-end server returns JSON (or XML in the past), instead of object? Why do we need to convert JSON to object when we want to deal with data in client side? Similarly, why we need to convert the object to JSON when we want to send the data back to back-end server?

This is the some reference quote (https://stackoverflow.com/a/383699/8229192): "The JSON Parser also offers another very useful method, stringify. This method accepts a JavaScript object as a parameter, and outputs back a string with JSON format. This is useful for when you want to send data back to the server:"

Question 1: Why it was useful?

var anObject = {name: "Andreas", surname : "Grech", age : 20};
var jsonFormat = JSON.stringify(anObject);
//The above method will output this: {"name":"Andreas","surname":"Grech","age":20}

Question 2: Why server-side (back-end) cannot work with object but have to JSON?

Question 3: Why client-side (front-end) cannot work with JSON but have to object?

Answer 1

The answer to all of your questions is:

HTTP doesn't communicate in binary, so you can't send objects back and forth. Instead, they need to be converted to some text-based system. (Base64 is pretty common...there are others).

JSON is not required, but it is common for HTTP communications because it is easy to convert to and from JavaScript objects.

Answer 2

In JavaScript, a correctly formatted JSON string can be converted into an object. To qualify, it must be of correct shape, which is like this:

{
    "property1": "value1",
    "property2": "value2",
    "property3": "value3",
}

As a string, it would look like this:

const json = "{ "property1": "value1", "property2": "value2", "property3": "value3" }"

Except, you cannot use quotes in this manner, or the JavaScript interpretter will get screwed up, so you have to escape them:

const json = "{ \"property1\": \"value1\", \"property2\": \"value2\", \"property3\": \"value3\" }"

This is what the utility JSON.stringify() does. It turns it into a transport-safe shape. When you want to convert it back into an object, you use JSON.parse().

In JavaScript, you might do something like this:

const object = {
    name: 'Bob',
    age: 1337,
    color: 'neon brown'
}

// I would like to send this to the Frontend now:
const preparedObject = JSON.stringify(object)

// Send it to the Frontend now
sendToFront({ payload: preparedObject })

// Lets pretend the Frontend does this:
const objectFromBackEnd = response.payload

// The Frontend gets it, but it is just a string it can't do anything with, so now we need:
const getObjectBack = JSON.parse(preparedObject)
if (getObjectBack.name === 'Bob') {
    console.log('it worked')
}
// 'it worked'

In practice, you must parse exactly as many times as you stringify or JavsScript will not be able to convert the stringified object back to literal form.

I trust you can imagine how mangled it could get if you have double quotes inside double quotes inside double quotes. JavaScript can get equally confused.

To answer your questions specifically, the Backend (if it is using JavaScript) can and only does work with objects. The same is true for the Frontend, so the answer to your question 2 and 3 is both do, but you have to make sure they are interpretted correctly.

If you do JSON.stringify() to a non-object, it will throw an error.

If you do JSON.parse() to an improperly formatted JSON string, it will throw an error.

JSON is universally excellent because it provides a super friendly format for human-readers and super friendly for non-JavaScript machine-readers. It is both human and machine friendly, as compared to XML and other types of accomplishing the same thing.

Your missing link is you need to internalize how JSON.stringify() and JSON.parse() work. Test them out a bit and remove some ", ,, and : characters and see how they respond.

Try this also:

    const object = {
        name: 'Bob',
        age: 1337,
        color: 'neon brown'
    }

    console.log('Test 1', JSON.stringify(object))

    console.log('Test 2', JSON.stringify(JSON.stringify(object)))

    console.log('Test 3', JSON.stringify(JSON.stringify(JSON.stringify(object))))

    //Now try adding this after:

    console.log(JSON.parse(JSON.parse(JSON.parse(JSON.stringify(JSON.stringify(JSON.stringify(object)))))))

This is strong for any programming language, because if your program outputs a valid JSON string, it doesn't matter how you created it. I just do JSON.parse('string') from my JavaScript code and start reading it using dot notation and iterating through everything in the JSON "object".

You can read more here: http://www.json.org/