JavaScript JSON
JSON signifie J ava S cript O bject N otation.
JSON est un format texte brut pour stocker et transporter des données.
JSON est similaire à la syntaxe utilisée pour créer des objets JavaScript.
JSON est utilisé pour envoyer , recevoir et stocker des données .
Exemple
'{"name":"John", "age":30, "car":null}' L'exemple ci-dessus définit un objet avec trois propriétés :
- "name"
- "age"
- "car"
Chaque propriété a une valeur :
- "John"
- 30
- null
Pourquoi JSON ?
- JSON facilite l'envoi et le stockage de données entre les ordinateurs
- JSON est uniquement du texte et indépendant de la langue *
* La syntaxe est dérivée de celle des objets JavaScript, mais JSON est uniquement du texte.
Le code pour lire et générer des données JSON peut être écrit dans n'importe quel langage de programmation.
Le format JSON a été spécifié à l'origine par Douglas Crockford .
JSON et JavaScript
Le format JSON est syntaxiquement identique au code pour créer des objets JavaScript.
En raison de cela, un programme JavaScript peut facilement convertir des données JSON en objets JavaScript natifs.
JavaScript dispose d'une fonction intégrée pour convertir des chaînes JSON en objets JavaScript :
JSON.parse()
JavaScript a également une fonction intégrée pour convertir un objet en une chaîne JSON :
JSON.stringify()
Vous pouvez recevoir du texte brut d'un serveur et l'utiliser comme un objet JavaScript.
Vous pouvez envoyer un objet JavaScript à un serveur au format texte brut.
Vous pouvez travailler avec des données en tant qu'objets JavaScript, sans avoir à effectuer de parsing ou de traductions compliqués.
Stockage des données
Lors du stockage de données, celles-ci doivent être dans un certain format, et peu importe où vous choisissez de les stocker, le texte est toujours l'un des formats légaux.
JSON permet de stocker des objets JavaScript sous forme de texte.
Exemple JSON
Texte qui définit un objet employés avec un tableau de trois objets employés :
{
"employees":[
{"firstName":"John", "lastName":"Doe"},
{"firstName":"Anna", "lastName":"Smith"},
{"firstName":"Peter", "lastName":"Jones"}
]
}
Si vous analysez la chaîne JSON avec un programme JavaScript, vous pouvez accéder aux données en tant qu'objet :
let personName = obj.name;
let personAge = obj.age; Données JSON - Un nom et une valeur
Les données JSON sont écrites sous forme de paires nom/valeur, tout comme les propriétés des objets JavaScript.
Une paire nom/valeur se compose d'un nom de champ (entre guillemets doubles), suivi d'un deux-points, suivi d'une valeur :
"firstName":"John" Les noms JSON nécessitent des guillemets doubles. Les noms JavaScript n'en nécessitent pas.
Objets JSON
Les objets JSON sont écrits à l'intérieur d'accolades.
Tout comme en JavaScript, les objets peuvent contenir plusieurs paires nom/valeur :
{"firstName":"John", "lastName":"Doe"} Tableaux JSON
Les tableaux JSON sont écrits à l'intérieur de crochets.
Tout comme en JavaScript, un tableau peut contenir des objets :
"employees":[
{"firstName":"John", "lastName":"Doe"},
{"firstName":"Anna", "lastName":"Smith"},
{"firstName":"Peter", "lastName":"Jones"}
] Dans l'exemple ci-dessus, l'objet "employees" est un tableau. Il contient trois objets.
Chaque objet est un enregistrement d'une personne (avec un prénom et un nom de famille).
Conversion d'un texte JSON en un objet JavaScript
Une utilisation courante de JSON est de lire des données à partir d'un serveur web et d'afficher ces données dans une page web.
Pour simplifier, cela peut être démontré en utilisant une chaîne comme entrée.
Tout d'abord, créez une chaîne JavaScript contenant la syntaxe JSON :
let text = '{ "employees" : [' +
'{ "firstName":"John" , "lastName":"Doe" },' +
'{ "firstName":"Anna" , "lastName":"Smith" },' +
'{ "firstName":"Peter" , "lastName":"Jones" } ]}'; Ensuite, utilisez la fonction intégrée JavaScript JSON.parse() pour convertir la chaîne en un objet JavaScript :
const obj = JSON.parse(text); Enfin, utilisez le nouvel objet JavaScript dans votre page :
Exemple
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
obj.employees[1].firstName + " " + obj.employees[1].lastName;
</script>