JavaScript et JSON (avec exemples)

Dans ce didacticiel, vous découvrirez JSON et comment JavaScript est utilisé avec JSON à l'aide d'exemples.

JSON signifie Javascript Object Notation. JSON est un format de données textuel utilisé pour stocker et transférer des données. Par exemple,

 // JSON syntax ( "name": "John", "age": 22, "gender": "male", )

Dans JSON, les données sont dans des paires clé / valeur séparées par une virgule ,.

JSON est dérivé de JavaScript. Ainsi, la syntaxe JSON ressemble à la syntaxe littérale d'objet JavaScript. Cependant, le format JSON est également accessible et créé par d'autres langages de programmation.

Remarque : les objets JavaScript et JSON ne sont pas les mêmes. Vous découvrirez leurs différences plus tard dans ce didacticiel.

Données JSON

Les données JSON se composent de paires clé / valeur similaires aux propriétés d'objet JavaScript. La clé et les valeurs sont écrites entre guillemets doubles séparés par deux points :. Par exemple,

 // JSON data "name": "John"

Remarque : les données JSON nécessitent des guillemets doubles pour la clé.

Objet JSON

L'objet JSON est écrit entre accolades ( ). Les objets JSON peuvent contenir plusieurs paires clé / valeur . Par exemple,

 // JSON object ( "name": "John", "age": 22 )

Tableau JSON

Le tableau JSON est écrit entre crochets ( ). Par exemple,

 // JSON array ( "apple", "mango", "banana") // JSON array containing objects ( ( "name": "John", "age": 22 ), ( "name": "Peter", "age": 20 ). ( "name": "Mark", "age": 23 ) )

Remarque : les données JSON peuvent contenir des objets et des tableaux. Cependant, contrairement aux objets JavaScript, les données JSON ne peuvent pas contenir de fonctions en tant que valeurs.

Accéder aux données JSON

Vous pouvez accéder aux données JSON en utilisant la notation par points. Par exemple,

 // JSON object const data = ( "name": "John", "age": 22, "hobby": ( "reading" : true, "gaming" : false, "sport" : "football" ), "class" : ("JavaScript", "HTML", "CSS") ) // accessing JSON object console.log(data.name); // John console.log(data.hobby); // ( gaming: false, reading: true, sport: "football") console.log(data.hobby.sport); // football console.log(data.class(1)); // HTML

Nous utilisons la .notation pour accéder aux données JSON. Sa syntaxe est:variableName.key

Vous pouvez également utiliser la syntaxe entre crochets ()pour accéder aux données JSON. Par exemple,

 // JSON object const data = ( "name": "John", "age": 22 ) // accessing JSON object console.log(data("name")); // John

Objets JavaScript VS JSON

Bien que la syntaxe de JSON soit similaire à celle de l'objet JavaScript, JSON est différent des objets JavaScript.

JSON Objet JavaScript
La clé dans la paire clé / valeur doit être entre guillemets. La clé dans la paire clé / valeur peut être sans guillemets.
JSON ne peut pas contenir de fonctions. Les objets JavaScript peuvent contenir des fonctions.
JSON peut être créé et utilisé par d'autres langages de programmation. Les objets JavaScript ne peuvent être utilisés qu'en JavaScript.

Conversion de JSON en objet JavaScript

Vous pouvez convertir des données JSON en un objet JavaScript à l'aide de la JSON.parse()fonction intégrée. Par exemple,

 // json object const jsonData = '( "name": "John", "age": 22 )'; // converting to JavaScript object const obj = JSON.parse(jsonData); // accessing the data console.log(obj.name); // John

Conversion d'un objet JavaScript en JSON

Vous pouvez également convertir des objets JavaScript au format JSON à l'aide de la JSON.stringify()fonction intégrée JavaScript . Par exemple,

 // JavaScript object const jsonData = ( "name": "John", "age": 22 ); // converting to JSON const obj = JSON.stringify(jsonData); // accessing the data console.log(obj); // "("name":"John","age":22)"

Utilisation de JSON

JSON est le format le plus couramment utilisé pour transmettre des données (échange de données) d'un serveur vers un client et vice-versa. Les données JSON sont très faciles à analyser et à utiliser. Il est rapide d'accéder et de manipuler les données JSON car elles ne contiennent que des textes.

JSON est indépendant du langage. Vous pouvez également créer et utiliser JSON dans d'autres langages de programmation.

Articles intéressants...