JSON.stringify() & JSON.parse()

JSON

JSON, or JavaScript Object Notation, is a text format for storing and transporting complex data between systems. Javascript includes simple methods for converting JSON text to an object or an array, and JSON objects and arrays to JSON text.

This is useful when transferring data to be read by different systems.

JSON.stringify() and JSON.parse() are built in functions that can be used on JavaScript objects and arrays to convert them to and from JSON strings.

JSON.stringify() converts a JavaScript object or array to a JSON string, which can be store as text.

JSON.parse() converts a JSON string back into a JavaScript object or array.

---

Here, I have an array called albums of album objects, each containing two keys: "artist" and "title":

let albums = [
{
  "artist" : "Herbie Hancock",
  "title" : "Head Hunters",
},
{
  "artist" : "Beastie Boys",
  "title" : "Pauls Boutique"
},
  {
  "artist" : "The Cramps",
  "title" : "Bad Music for Bad People"
}
];

console.log(albums);

Logging albums gives the following output:

// [object Array] (3)
[// [object Object] 
{
  "artist": "Herbie Hancock",
  "title": "Head Hunters"
},// [object Object] 
{
  "artist": "Beastie Boys",
  "title": "Pauls Boutique"
},// [object Object] 
{
  "artist": "The Cramps",
  "title": "Bad Music for Bad People"
}]

When calling console.log(albums);, the console sees that albums is an array and shows [object Array] for the entire array and [object Object] for each item inside of it. This shorthand is used by default.

---

JSON.stringify()

JSON.stringify() takes a JavaScript array or object and converts it into a JSON string (also called serialization).

Here, I'm converting the albums array to a JSON string by invoking the JSON.stringify() method on albums, and assigning it to the variable albumStrings:

let albumStrings = JSON.stringify(albums);

console.log(albumStrings);

Logging albumStrings gives the following output:

" [{"artist": "Herbie Hancock", "title": "Head Hunters"}, {"artist": 
"Beastie Boys", "title": "Pauls Boutique"}, {"artist": "The Cramps", 
"title": "Bad Music for Bad People"}] ";

"[{"artist": "Herbie Hancock", "title": "Head Hunters"}, {"artist": "Beastie Boys", "title": "Pauls Boutique"}, {"artist": "The Cramps", "title": "Bad Music for Bad People"}]"

This returns a JSON string representing an array of three objects, each with two properties.

JSON has specific formatting, so strings are wrapped in double quotes (""), and object keys are also wrapped in double quotes ("").

JSON.stringify() Parameters

The JSON.stringify() function accepts up to three parameters:

1. Value: the value to convert to a JSON string (in this case, albums)

2. Replacer(Optional): a function that lets you modify each key-value pair. Set to null if not needed.

3. Space(Optional): the number of spaces to use for indentation. This makes the output easier to read. (4)
   

let formattedAlbumString = JSON.stringify(albums, null, 4);

console.log(formattedAlbumString);

Logging formattedAlbumString gives the following output:

"[
    {
        'artist': 'Herbie Hancock',
        'title': 'Head Hunters'
    },
    {
        'artist': 'Beastie Boys',
        'title': 'Pauls Boutique'
    },
    {
        'artist': 'The Cramps',
        'title': 'Bad Music for Bad People'
    }
]"

Here, each object is now formatted with indentation, making it easier to debug and improving readability.

---

Next, I've created a string, albumsString, representing three album objects, each containing two keys: "artist" and "title":

(note that it starts with a single quote)

let albumsString = '[{"artist": "Bad Brains", "title": "Bad Brains"}, 
{"artist": "A Tribe Called Quest", "title": "Low End Theory"}, {"artist": 
"Nina Simone", "title": "Wild is the Wind"}]'

console.log(albumsString);

Logging albumsString gives the following output:

"[{'artist': 'Bad Brains', 'title': 'Bad Brains'}, {'artist': 'A Tribe 
Called Quest', 'title': 'Low End Theory'}, {'artist': 'Nina Simone', 
'title': 'Wild is the Wind'}]"

Logging albumsString.length gives the following output:

console.log(albumsString.length); // length of string
162

The length is 162 because albumsString is a single string, even though it looks like an array of objects.

JSON.parse()

JSON.parse() takes a JSON string and converts it into a JavaScript object or array (also called deserialization).

Here, I'm converting albumsString to an array of objects by invoking the JSON.parse() method on it, and assigning it to the variable albumsObject:

let albumsObject = JSON.parse(albumsString);

console.log(albumsObject);

Logging albumsObject gives the following output:

// [object Array] (3)
[// [object Object] 
{
  "artist": "Bad Brains",
  "title": "Bad Brains"
},// [object Object] 
{
  "artist": "A Tribe Called Quest",
  "title": "Low End Theory"
},// [object Object] 
{
  "artist": "Nina Simone",
  "title": "Wild is the Wind"
}]

Logging albumsObject.length gives the following output:

console.log(albumsObject.length); // length of object
3

Now, albums.Object.length will be 3 because it is an array with three elements.

And if I want, I can convert albumsObject back into a formatted JSON string using JSON.stringify().

console.log(JSON.stringify(albumsObject, null, 4));

Logging this code gives the following output:

"[
    {
        'artist': 'Bad Brains',
        'title': 'Bad Brains'
    },
    {
        'artist': 'A Tribe Called Quest',
        'title': 'Low End Theory'
    },
    {
        'artist': 'Nina Simone',
        'title': 'Wild is the Wind'
    }
]"

---

JSON.stringify() and JSON.parse() are essential methods for working with JSON data. They allow you to convert complex JavaScript objects and arrays into JSON strings and back again, making it easier to store and transfer.

• JSON.stringify() converts JavaScript objects an arrays into JSON strings.
• JSON.parse() converts JSON strings back into JavaScript objects or array.

These functions allow for easy data exchange between systems.