Why convert json to javascript object? Why not use it as is?

JavaScript
1

Hello all,

I’ve just been introduced to the JSON.parse() function. I may be missing something obvious here but I don’t see why JSON needs to be converted to a JavaScript Object. My confusion is because I am thinking that JSON data IS a JavaScript Object.

I’ve read the explanation here. When it explains this:

A common use of JSON is to read data from a web server, and display the data in a web page.
For simplicity, this can be demonstrated using a string as input.
First, create a JavaScript string containing JSON syntax:

I think I am not understanding what JSON data is.

Any explanation or suggested reading is greatly appreciated.

2

JSON.parse() converts a JSON formatted string into an object.

2 Likes
3

JSON is a representation of a JavaScript object in string form. Basically, a JavaScript object can only exist where there is a JavaScript runtime, such as in the browser or in Node. You cannot send objects by HTTP because the network only supports certain formats. JSON is just an efficient format for sending information over the wire.

The process of changing an object into a string is called serialisation. You have to do this not only for HTTP, but also to store data in a database or in the browser local storage.

Another advantage of JSON is that it can be interpreted by other programming languages. If you have a Java backend, it can parse a JSON string, but it could not use a JavaScript object.

1 Like
4

JSON is just a text file. No different than an HTML or CSS file.

But the text file is formatted in a special way. So Javascript can parse/read this ordinary text file and convert the data in it, into an object/class whose different elements/properties/embedded data can be easily accessed programmatically…

as opposed to reading a text file line by line and parsing the text content to extract the data that you need.

1 Like
5

I think this is what I was missing:

So, a JSON text file can be the exact same, character for character as a JavaScript object. The difference is that when created

that object is being stored in a way that makes its contents easier to search/access?

Is my understanding correct?

6

But then!!!
In the ‘Intro to JavaScript’ section, lesson ’ Basic JavaScript: Record Collection’ starts with the following code:

// Setup
var collection = {
    "2548": {
      "album": "Slippery When Wet",
      "artist": "Bon Jovi",
      "tracks": [ 
        "Let It Rock", 
        "You Give Love a Bad Name" 
      ]
    },
    "2468": {
      "album": "1999",
      "artist": "Prince",
      "tracks": [ 
        "1999", 
        "Little Red Corvette" 
      ]
    },
    "1245": {
      "artist": "Robert Palmer",
      "tracks": [ ]
    },
    "5439": {
      "album": "ABBA Gold"
    }
};
// Keep a copy of the collection for tests
var collectionCopy = JSON.parse(JSON.stringify(collection));

// Only change code below this line

Why does the creation of collectionCopy need to .stringify(collection)? Isn’t collection being created in a JavaScript environment? Or is this done this way just to teach the difference? AND if it is to show the difference (JSON vs JavaScript Obj) how would you create collection, in this example, as an obj from the get go?

Thanks for taking the time to help with my understanding of this. I might just be overthinking this so I can accept that.

Edit: please let me know if this should be a new topic.

7

In this particular case:

var collectionCopy = JSON.parse(JSON.stringify(collection));

What this is doing is making a deep copy of collection by first turning it into a string, then back into a brand new object. JSON isn’t really being used here for the reasons you’d normally use it, it’s just that the process of stringifying then parsing creates a whole new object distinct from any others. This is for the benefit of the tests, so just in case you do anything to the collection object, it still has an untouched copy of it to work from.

2 Likes
8

Ok, makes sense. Thank you.