When making async data request, why parse, then tringify?

Programming
1

In the challenge example, why do we first parse a string into an object and then turn that object into a string via JSON.parse>JSON.stringify?

const req = new XMLHttpRequest();
req.open("GET",'/json/cats.json',true);
req.send();
req.onload = function(){
  const json = JSON.parse(req.responseText);
  document.getElementsByClassName('message')[0].innerHTML = JSON.stringify(json);
};

Challenge: Get JSON with the JavaScript XMLHttpRequest Method

Link to the challenge:

2

JSON.parse() allows you to turn plain JSON into a JS object.
JSON.stringify() turns a JS object into a JSON string (the opposite)

In order to set the innerHTML of the elements with the ā€˜messageā€™ class name to a value of choice, you need it to be a string.

I guess it makes sense to question why it applies these opposite methods one right after another

My answer would be that doing this is a good practice because it allows you to process the response you get as regular JS, no matter if you are gonna set a string as an innerHTML value in the next line, or do some crazy data structure / algorithm code before the response you get is what you need.

For example: accessing a small string inside of a big JSON, reverse it and make its vowels uppercase.

All of this might be obvious, but I hope it helps.

3

i pondered a bit more over the mechanics behind it and is it that the plain json has slightly different syntax than js object, so pushing it thru parse>stringify actually modify it slightly? I mean the received string will vary slightly from the output string(after the above operations are executed).

4

Itā€™s not a JS object: JSON is always a string. It looks like a JS object because thatā€™s what the design of JSON is based on. But it isnā€™t, itā€™s not JS or anything to do with JS: itā€™s a data interchange format.

Itā€™s useful and very widely used because you donā€™t send language-specific code between computers (or, often, between programs on a computer). Instead, what gets sent is data, and there needs to be a way to encode the data to a common format at one end (JS has JSON.stringify to do this, which converts a JS object to a correctly-formatted JSON string), then decode it into something useful the language being used understands at the other end (JS has JSON.parse for this, which converts correctly formatted JSON to a JS object).

As an example, another data format is .csv, which lets you describe tabular data, eg:

Year,Make,Model
1997,Ford,E350
2000,Mercury,Cougar

Using JSON, that might be written as:

[
  { "year": 1997, "make": "Ford", "model": "E350" },
  { "year": 2000, "make": "Mercury", "model": "Cougar" }
]

Neither of those things have anything to do with a specific programming language, theyā€™re just a way of encoding data in a text form so that itā€™s easy for both a person and a computer to read or write data from/to it.

In the slightly contrived example used in the challenge, you are getting some data from another computer (fetching it over HTTP). It arrives in the form of JSON. The example uses parse as a demonstration: when you run that, you now have a JS object that you can actually use in the program. It isnā€™t used, but you could now do things like change the values, as @dav1dborja says. You then want to print that object, visually, to the screen. To do that, it needs to be a string. Because JSON looks exactly like a JS object, running JSON.stringify will give you that visual representation of the object, so thatā€™s what you can use.

5

but in the end, if we were to simply put the JSON data displayed in the html element, similarly to how we do in the challenge, we could simply put the raw JSON string without applying the parse>stringify sequence ?

ps: i was made aware the JSON is a string, i simply referred it as an object, because thats what the json data in the challenge was representing indirectly

6

Iā€™m guessing itā€™s just to show it.

You would normally parse it, and if we show how to parse it we might as well show how to stringify it back again.

Also, req.responseText and JSON.stringify(JSON.parse(req.responseText)) is not an exact match.

console.log(req.responseText === JSON.stringify(JSON.parse(req.responseText))) // false

But just to be clear, thatā€™s not why the test fails when using req.responseText instead though, it fails because there is a regex check (the tests).