JSON.stringify() & JSON.parse()

JSON

JSON, ou JavaScript Object Notation, est un format de texte permettant de stocker et de transporter des données complexes entre les systèmes. Javascript inclut des méthodes simples pour convertir du texte JSON en objet et des objets JSON en texte.

C'est utile quand...

JSON.stringify() et JSON.parse() sont des fonctions intégrées qui peuvent être utilisées sur des objets et des chaînes JavaScript pour les convertir d'avant en arrière.

Ici, j'ai un tableau appelé albums d'objets album, chacun contenant deux clés : "artiste" et "titre".

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);

La journalisation de ce code donnera le résultat suivant :

// [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"
}]

Lors de l'appel de console.log(albums);, la console voit que albums est un tableau. Il résume le tableau comme [object Array] et chaque élément à l'intérieur comme [object Object], au lieu de développer chaque détail par défaut. Il s'agit du raccourci intégré à la console pour indiquer que chaque élément est un objet.

JSON.stringify()

JSON.stringify() prend un JavaScript, un tableau ou un objet complexe et le transforme en chaîne JSON.

Ici, je convertis le tableau albums en chaîne JSON en appelant la méthode JSON.stringify() sur les albums :

let albumStrings = JSON.stringify(albums);

console.log(albumStrings);

La journalisation de ce code donnera le résultat suivant :

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

Cela nous donne un tableau de trois objets avec deux propriétés chacun.

Mais et si je le voulais..

La fonction JSON.stringify() accepte jusqu'à trois paramètres :

1. Valeur : la valeur à convertir en chaîne JSON (albums)

2. Replacer(Facultatif) : une fonction qui vous permet de modifier chaque paire clé-valeur (null)

3. Espace(Facultatif) : le nombre d'espaces à utiliser par niveau (4)
   

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

console.log(albumStringsFormat);

La journalisation de ce code donnera le résultat suivant :

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

Ici, vous pouvez voir que chaque objet maintenant

JSON.parse()

Ensuite, j'ai créé une chaîne de

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);

La journalisation de ce code donnera le résultat suivant :

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

Si j'enregistre la longueur

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

Si ça me donne une longueur de 162, parce que.

Ensuite, si j'analyse le

let albumsObject = JSON.parse(albumsString);

console.log(albumsObject);

La journalisation de ce code donnera le résultat suivant :

// [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"
}]

Maintenant, quand j'enregistre la longueur de l'objet

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

Enregistrez ceci

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

La journalisation de ce code donnera le résultat suivant :

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!