Le JSON en Javascript est un élément essentiel du développement web moderne. Il offre une méthode simple et efficace pour échanger des données structurées entre les serveurs et les clients, ainsi qu’entre différentes parties d’une application. Nous allons découvrir en détail ce qu’est le JSON, comment il est utilisé en JavaScript, et pourquoi il est devenu si populaire.
Qu’est-ce que le JSON ?
Le JSON est un format de données léger et facile à lire, inspiré de la syntaxe des objets JavaScript. Il est utilisé pour représenter des données structurées sous forme de paires clé-valeur, et peut inclure des tableaux et des objets imbriqués. Contrairement à XML, qui est plus verbeux et complexe, le JSON en Javascript est simple et facile à comprendre, ce qui le rend populaire dans le développement web.
Syntaxe et structure du JSON
Pour mieux comprendre, prenons un exemple simple : une application de conduite accompagnée. Celle-ci stockera des données en JSON. Nous aurons besoin des données suivantes : Le lieu de départ, le lieu d’arrivée, l’heure de départ et l’heure d’arrivée pour calculer la durée du trajet ainsi que le nombre de kilomètres parcourus.
{
"lieu_depart": "Troyes",
"lieu_arrive": "Paris",
"heure_depart": "12:30",
"heure_arrivee": "14:15",
"distance": 177
}Une structure JSON commence et se termine par une accolade { ... }. Chaque élément clé: valeur est séparé par une virgule, sauf pour le dernier élément. Dans l’exemple ci-dessus, la clé lieu_depart aura comme valeur Troyes. Et ainsi de suite …
Les types de données en JSON
Nombre : Les nombres peuvent être entiers ou flottants. En JSON, les nombres à virgule sont séparés par un point . et non par une virgule.
{
"entier": 177,
"flottant": 3.14
}Chaîne de caractères : Une séquence de caractères Unicode, entourée de guillemets doubles. Exemple :
{
"nom": "Alice Dupont",
"ville": "Troyes"
}Booléen : Les booléens ont comme valeur true ou false.
{
"estAdulte": false,
"doitEtreAccompagne": true
}Tableau : Un tableau ou un array est une collection ordonnée de valeurs, séparées par des virgules et entourées de crochets.
{
"nombres": [1, 2, 3, 4, 5],
"couleurs": ["rouge", "vert", "bleu"]
}Objet (Object) : Un objet est une collection non ordonnée de paires clé-valeur, séparées par des virgules et entourées d’accolades. Dans l’exemple ci-dessous, la clé adresse a pour valeur un objet. Cet objet est symbolisé par l’ouverture d’une accolade et contient la clé rue qui a pour valeur 123 Rue de la Fontaine et la clé ville qui a pour valeur Troyes.
{
"personne": {
"nom": "Alice",
"age": 17,
"adresse": {
"rue": "123 rue Émile Zola",
"ville": "Troyes"
}
}
}Tableau et objet
Si nous reprenons notre application, celle-ci contiendra plusieurs trajets, donc nous allons créer un élément trajet qui regroupera ces différents trajets. Nous allons donc modifier notre structure :
{
"trajets": [
{
"trajet_id": 1,
"lieu_depart": "Troyes",
"lieu_arrive": "Paris",
"heure_depart": "12:30",
"heure_arrivee": "14:15",
"distance": 177
},
{
"trajet_id": 2,
"lieu_depart": "Paris",
"lieu_arrive": "Lille",
"heure_depart": "08:30",
"heure_arrivee": "11:50",
"distance": 229
}
]
}Le code JSON ci-dessus représente donc les informations de deux trajets différents. Le premier niveau de l’objet JSON a une clé trajet qui contient un tableau (symbolisé par les crochets). Ce tableau contient lui-même deux objets. Ces deux objets représentent donc deux trajets différents.
Chaque objet contenu dans le tableau représente un trajet spécifique, avec les paires clés/valeurs suivantes : trajet_id, lieu_depart, lieu_arrive, heure_depart, heure_arrivee et distance.
L’un des gros avantages du JSON, comme vous pouvez le constater ci-dessus, est sa lisibilité. Les données sont structurées et facile à lire.
Différence entre accolade et crochet en JSON
Comme nous venons de le voir, en JSON, les accolades {...} délimitent un objet JSON, tandis que les crochets [...] délimitent un tableau JSON.
Les accolades {...} sont utilisées pour représenter des objets JSON, qui sont des collections non ordonnées de paires clé-valeur. Les clés doivent être des chaînes de caractères et doivent être uniques à l’intérieur d’un objet. Les valeurs peuvent être de différents types de données JSON comme vu précédemment.
{
"trajet_id": 1,
"lieu_depart": "Troyes",
"lieu_arrive": "Paris",
"heure_depart": "12:30",
"heure_arrivee": "14:15",
"distance": 177
}Les crochets [...] sont utilisés pour représenter des tableaux JSON, qui sont des collections ordonnées d’éléments. Ces éléments peuvent être de différents types de données JSON, y compris des objets ou d’autres tableaux.
Dans l’exemple de notre application de conduite accompagnée, nous utilisons des crochets (donc un tableau) pour la clé trajet. Cette clé contient donc un tableau regroupant les différents trajets que nous stockerons en JSON.
Comment faire référence à un autre élément JSON
Maintenant, pour notre application, nous allons avoir besoin de stocker une donnée essentielle : la météo. La première étape sera de mettre en place une structure JSON pour cette donnée :
{
"meteo": [
{
"idMeteo" : 1,
"meteo": "Soleil"
},
{
"idMeteo" : 2,
"meteo": "Nuages"
},
{
"idMeteo" : 3,
"meteo": "Pluie"
},
{
"idMeteo" : 4,
"meteo": "Brouillard"
}
]
}Voici quelques points à considérer avec cette structure :
- Utilisation d’un tableau : Nous avons choisi d’utiliser un tableau pour stocker les données météorologiques.
- Attribut ou clé : Chaque entrée dans le tableau contient une clé
idMeteopour identifier de manière unique chaque entrée météorologique. Cela est pratique pour référencer ces météos à partir d’autres parties de notre fichier JSON. - Simplicité : Cette structure est simple et directe, ce qui la rend facile à comprendre et à manipuler. Chaque objet contient simplement un identifiant et une description de la météo associée.
- Facilité d’extension : Si nous avons besoin d’ajouter de nouvelles entrées météorologiques à l’avenir, cette structure permettra une extension facile en ajoutant simplement de nouveaux objets au tableau.
Nous allons maintenant associer notre structure des trajets à celle de la meteo en ajoutant à chaque trajet l’id de la météo :
{
"trajets": [
{
"trajet_id": 1,
"lieu_depart": "Troyes",
"lieu_arrive": "Paris",
"heure_depart": "12:30",
"heure_arrivee": "14:15",
"distance": 177,
"meteo_id": 1
},
{
"trajet_id": 2,
"lieu_depart": "Paris",
"lieu_arrive": "Lille",
"heure_depart": "08:30",
"heure_arrivee": "11:50",
"distance": 229,
"meteo_id": 2
}
],
"meteo": [
{
"idMeteo" : 1,
"meteo": "Soleil"
},
{
"idMeteo" : 2,
"meteo": "Nuages"
},
{
"idMeteo" : 3,
"meteo": "Pluie"
},
{
"idMeteo" : 4,
"meteo": "Brouillard"
}
]
}Pour déterminer quelle était la météo pour le premier trajet, vous devez d’abord trouver le trajet avec l’ID 1 : "trajet_id": 1, puis utiliser l’ID météo associé à ce trajet "meteo_id": 1 pour trouver les détails météorologiques correspondants dans le tableau meteo. Dans notre exemple, l’ID météo associé au premier trajet est 1. Ensuite, vous recherchez dans le tableau meteo l’objet avec "idMeteo" : 1, qui indique que la météo était Soleil pour ce trajet.
Dans l’exemple ci-dessus, nous avons simplement ajouté l’élément meteo pour y faire référence dans l’objet trajets.
Vérifier, valider et compacter votre code JSON
Pour vérifier et valider un fichier JSON, vous pouvez utiliser différents outils en ligne gratuits. Il existe de nombreux validateurs JSON en ligne où vous pouvez copier-coller votre JSON pour le vérifier. Un outil en ligne fiable pour valider son JSON est JSONLint. Il vous permet de coller ou de télécharger votre JSON, puis il vérifie la syntaxe et signale les éventuelles erreurs. C’est un outil simple et largement utilisé pour la validation de JSON.
Compacter son code JSON réside à le rendre plus concis en enlevant les espaces, les retours à la ligne et les indentations inutiles. Cela présente plusieurs avantages tel que la réduction de la taille du fichier et l’amélioration de sa lisibilité pour les machines. Un fichier JSON compact est plus facile à stocker et à transmettre, car il nécessite moins d’espace et peut être traité plus rapidement par les systèmes informatiques. Cependant, cela va rendre le JSON moins lisible pour les humains… Vous pouvez compacter votre script JSON depuis JSONLint.
Insérer du JSON dans un fichier HTML
Vous pouvez incorporer le JSON dans une balise <script> en lui ajoutant l’attribut type="application/json" :
<body>
<script type="application/json" id="jsonData">
{
"lieu_depart": "Troyes",
"lieu_arrive": "Paris",
"heure_depart": "12:30",
"heure_arrivee": "14:15",
"distance": 177
}
</script>
</body>Dans cet exemple, le JSON est inclus directement à l’intérieur de la balise <script> avec le type MIME application/json.
Stocker des données JSON en JavaScript dans une variable
Vous pouvez également stocker le JSON dans une variable JavaScript :
<body>
<script>
var jsonData = {
"lieu_depart": "Troyes",
"lieu_arrive": "Paris",
"heure_depart": "12:30",
"heure_arrivee": "14:15",
"distance": 177
};
</script>
</body>Accéder aux éléments JSON en Javascript
Parser le JSON en JavaScript
<body>
<script type="application/json" id="jsonData">
{
"lieu_depart": "Troyes",
"lieu_arrive": "Paris",
"heure_depart": "12:30",
"heure_arrivee": "14:15",
"distance": 177
}
</script>
<script>
// Accéder au JSON dans le script
var jsonData = JSON.parse(document.getElementById('jsonData').textContent);
console.log(jsonData);
</script>
</body>Intéressons nous à la ligne de code Javascript ci-dessous :
var jsonData = JSON.parse(document.getElementById('jsonData').textContent);Cet extrait de code JavaScript utilise JSON.parse() pour convertir une chaîne JSON en un objet JavaScript.
document.getElementById('jsonData'): cette partie du code sélectionne un élément HTML dans le document avec l’IDjsonData..textContent: une fois que l’élément est sélectionné,.textContentrécupère le contenu de cet élément.JSON.parse(): cette fonction JavaScript est utilisée pour analyser une chaîne JSON et la transformer en un objet JavaScript. Dans cet exemple, la chaîne JSON est obtenue à partir du contenu de l’élément sélectionné.var jsonData: la valeur retournée parJSON.parse()est affectée à la variablejsonData. Cette variable contient maintenant un objet JavaScript qui représente la structure de données décrite par la chaîne JSON.
En résumé, cette ligne de code prend une chaîne JSON provenant d’un élément HTML, la convertit en un objet JavaScript utilisable à l’aide de JSON.parse(), et stocke cet objet dans la variable jsonData pour une utilisation ultérieure dans le script JavaScript.
Accéder et afficher un élément JSON en Javascript
À partir de l’exemple précédent, nous allons utiliser la variable jsonData pour sélectionner et afficher une valeur précise en fonction du nom de sa clé. Par exemple, pour afficher 177, nous allons demander en javascript d’afficher la valeur de la clé distance :
<body>
<script type="application/json" id="jsonData">
{
"lieu_depart": "Troyes",
"lieu_arrive": "Paris",
"heure_depart": "12:30",
"heure_arrivee": "14:15",
"distance": 177
}
</script>
<script>
// Récupérer les données JSON du script
var jsonData = JSON.parse(document.getElementById("jsonData").textContent);
// Extraire la distance du trajet
var distance = jsonData.distance;
// Afficher la distance
console.log("Distance du trajet : " + distance + " km");
</script>
</body>Pour :
var distance = jsonData.distance;jsonData: c’est une variable qui contient les données JSON parsées à partir du contenu du script HTML avec l’ID jsonData. Après les avoir extraites, ces données sont stockées dans la variablejsonData.distance: c’est une propriété de l’objetjsonData. Dans ce cas précis, distance représente la distance du trajet entre le lieu de départ et le lieu d’arrivée.var distance: c’est une instruction JavaScript pour déclarer une nouvelle variable appelée distance qui va contenir la valeur de la propriété distance extraite du JSON.
En résumé, la ligne de code var distance = jsonData.distance; extrait la valeur de la distance du trajet à partir du JSON et la stocke dans une variable nommée distance, ce qui permet de manipuler plus facilement cette valeur dans le reste du code.
Avantages et inconvénients du JSON
Le JSON (JavaScript Object Notation) est un format de données très répandu et largement utilisé dans le développement de logiciels, en particulier dans les applications web. Pour conclure, voici quelques-uns de ses avantages et inconvénients :
Les avantages : la lisibilité humaine, Le JSON est facile à lire et à comprendre pour les humains, ce qui le rend utile pour la communication entre les développeurs et lors du débogage. Il est léger ce qui signifie qu’il utilise peu de bande passante lorsqu’il est transféré sur le réseau, ce qui le rend idéal pour les applications web et mobiles et il est pris en charge par de nombreux langages de programmation. Les API REST utilisent souvent JSON comme format de données pour les requêtes et les réponses, ce qui simplifie le développement d’applications web et mobiles.
Les inconvénients : son manque de typage peut rendre le traitement des données plus difficile dans certaines situations. On ne peut pas y ajouter de commentaires ce qui peut rendre la documentation des fichiers JSON plus difficile. Lorsqu’il est utilisé de manière incorrecte, le JSON peut être vulnérable à des attaques telles que l’injection de code JSON malveillant. Il n’est pas adapté au stockage de données binaires telles que les images ou les fichiers audio. Et enfin, selon la spécification JSON, l’ordre des clés dans un objet JSON n’est pas garanti, ce qui peut poser des problèmes dans certains cas où l’ordre des clés est important.
