Comment utiliser JavaScript Object Notation (JSON) pour la programmation HTML5 et CSS3

HTML5 et CSS3 All-in-One For Dummies, 3e édition

données JSON devient une partie très importante de la programmation Web, car il permet un mécanisme facile pour le transport des données entre les programmes et les langages de programmation.

Le stockage des données au format JSON

Pour voir comment fonctionne JSON, regardez ce simple fragment de code:

Ce code décrit une bestiole. La bestiole a deux propriétés, un nom et un âge. La bestiole ressemble beaucoup à un tableau, mais plutôt que d'utiliser un index numérique comme la plupart des tableaux, la bestiole a des valeurs de chaîne pour servir d'indices. Il est en fait un objet.

Vous pouvez vous référer aux éléments individuels avec une variation de la syntaxe de tableau, comme ceci:

Vous pouvez également utiliser ce qu'on appelle la notation par points (tel qu'il est utilisé dans les objets) comme ceci:

Pour stocker des données en notation JSON:

Créer la variable.

Vous pouvez utiliser l'instruction var comme vous le faites une variable.

Contenir le contenu à l'intérieur des accolades ( <> ).

Ceci est le même mécanisme que vous utilisez pour créer un tableau pré-chargé.

Désigner une clé.

La clé peut être une chaîne ou un entier.

Suivez la clé avec deux points (.).

Créez la valeur associée à cette clé.

Vous pouvez alors associer tout type de valeur que vous voulez avec la clé.

Séparer chaque paire nom / valeur par une virgule.

Vous pouvez ajouter autant de paires nom / valeur que vous le souhaitez.

Construire une structure plus complexe JSON

JSON est pratique car il peut être utilisé pour gérer des structures de données assez complexes. Par exemple, regardez la structure des données suivantes écrit au format JSON:

Cette structure de données est une autre façon de représenter les données de distance utilisés pour décrire les tableaux à deux dimensions. Ceci est un tableau à deux dimensions.

la distance est un objet JSON: La structure de données entier est stocké dans une seule variable. Cette variable est un objet JSON avec des paires nom / valeur.

L'objet à distance dispose de quatre touches: Elles correspondent aux quatre lignes du graphique d'origine.

Les clés sont des noms de ville: le tableau 2D d'origine utilisé des indices numériques, qui sont commodes mais un peu artificielle. Dans la structure JSON, les indices sont des noms de ville réels.

Configuration des données de cette manière semble un peu fastidieux, mais il est très facile de travailler avec. Les noms de ville sont utilisés directement pour extraire des données, afin que vous puissiez trouver la distance entre les deux villes avec une syntaxe semblable à un tableau:

Si vous préférez, vous pouvez utiliser la syntaxe à point:

Vous pouvez même aller avec une sorte d'hybride:

JSON a un certain nombre d'avantages importants en tant que format de données:

Autodocumenté: Même si vous voyez la structure de données lui-même sans code autour d'elle, vous pouvez dire ce que cela signifie.

L'utilisation de chaînes comme indices rend le code plus lisible.

les données JSON peuvent être stockés et transportés sous forme de texte: Cela se révèle avoir des implications profondes pour la programmation web, en particulier en AJAX.

JSON peut décrire les relations complexes: Le format JSON peut être utilisé pour décrire des relations plus complexes, y compris les bases de données complètes.

JSON est plus compact que XML: Un autre format appelé XML de données est fréquemment utilisé pour transmettre des données complexes. Cependant, JSON est plus compact et moins « verbeux » que XML.