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, and JSON objects to text.

This is useful when ...

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

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 this code will give 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. It summarizes the array as [object Array] and each item inside it as [object Object], instead of expanding every detail by default. This is the console's built-in shorthand to indicate each element is an object.

JSON.stringify()

JSON.stringify() takes a JavaScript a complex array or object and transforms it into a JSON string.

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

let albumStrings = JSON.stringify(albums);

console.log(albumStrings);

Logging this code will give the following output:

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

This give us an array of three objects with two properties each.

But what if I wanted to..

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

1. Value: the value to convert to a JSON string (albums)

2. Replacer(Optional): a function that lets you modify each key-value pair (null)

3. Space(Optional): the number of spaces to use per level (4)
   

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

console.log(albumStringsFormat);

Logging this code will give 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, you can see that each object now

JSON.parse()

Next, I've created a string of

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 this code will give 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'}]"

If I log the length

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

If gives me a length of 162, because.

Next, if I parse the

let albumsObject = JSON.parse(albumsString);

console.log(albumsObject);

Logging this code will give 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"
}]

Now, when I log the length of the object

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

Log this

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

Logging this code will give 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'
    }
]"

The above is the detailed content of JSON.stringify() & JSON.parse(). For more information, please follow other related articles on the PHP Chinese website!