Maison / Travailler sur Internet / Le format json est utilisé pour travailler avec. Format JSON : exemple et description. Syntaxe JSON avec exemples

Le format json est utilisé pour travailler avec. Format JSON : exemple et description. Syntaxe JSON avec exemples

27.10.2019 Travailler sur Internet

Pour travailler avec le format JSON, JavaScript a un objet JSON global. L'objet JSON a deux méthodes : stringify() et parse() . Outre ces deux méthodes, il ne contient aucune fonctionnalité supplémentaire.

méthode stringify()

La méthode stringify() convertit une valeur JavaScript en une chaîne JSON.

Fonctionnalités de conversion :

  • Une valeur, une fonction ou une valeur indéfinie de symbole de type rencontrée lors de la conversion sera soit omise (si elle se trouve dans un objet), soit nulle (si elle se trouve dans un tableau).
  • Les membres de prototype et les propriétés non énumérables sont ignorés.

Syntaxe

JSON.stringify(valeur[, remplaçant[, espace]])

Choix

valeur La valeur qui sera convertie en chaîne JSON. replacer (facultatif) La valeur du paramètre peut être une fonction, un tableau ou null .
  • Le tableau définit un ensemble de propriétés d'objet qui seront incluses dans la chaîne JSON. Les valeurs du tableau sont des chaînes correspondant aux noms des propriétés de l'objet converti.
  • La fonction permet de remplacer les valeurs des propriétés d'un objet dans une chaîne JSON. La fonction doit contenir deux paramètres : le nom de la propriété et la valeur de la propriété. Le nom de la propriété est une chaîne. La fonction doit renvoyer la nouvelle valeur de la propriété.
  • Si la valeur du paramètre est null , la chaîne JSON inclura toutes les propriétés de l'objet.
espace (facultatif) Rend la chaîne JSON plus lisible en ajoutant un remplissage pour chaque niveau d'imbrication. La valeur du paramètre peut être une chaîne ou un nombre.
  • Le nombre spécifie le nombre d'espaces utilisés comme indentation pour chaque niveau d'imbrication. Chaque niveau d'imbrication suivant est complété par de nouveaux retraits. Par exemple, si la valeur du paramètre est 2, le premier niveau d'imbrication sera indenté de deux espaces, le niveau d'imbrication suivant sera indenté de 4 espaces, etc. Le nombre maximum d'espaces pouvant être spécifié est de 10. Si vous spécifiez un nombre plus grand, il diminuera automatiquement à 10.
  • La chaîne spécifie le caractère utilisé comme indentation pour chaque niveau d'imbrication. La longueur de la chaîne est limitée à 10 caractères, si vous spécifiez une chaîne plus longue, elle sera tronquée à 10 caractères. L'utilisation d'une chaîne vous permet également d'utiliser une tabulation ("\t") comme retrait. Chaque niveau d'imbrication suivant est complété par de nouveaux caractères d'indentation. Par exemple, si la valeur du paramètre est - (trait d'union), le premier niveau d'imbrication utilisera un trait d'union comme retrait, le niveau d'imbrication suivant utilisera 2 traits d'union, et ainsi de suite.

Valeur de retour

Chaîne JSON.

Exemple

let person = ( name: "Homer", age: 40, work: ( place: "Nuclear Plant", location: "Springfield" ) ) // Exemple de paramètre unique console.log(JSON.stringify(person)); // "("name":"Homer","age":40,"work":("place":"Nuclear plant","location":"Springfield"))" // Exemple avec deux paramètres (array ) console.log(JSON.stringify(personne, ["nom", "âge"])); // "("name":"Homer","age":40)" // Exemple avec deux paramètres (fonction) console.log(JSON.stringify(person, function (key, value) ( ​​​​switch (key ) ( case "name": return "Bart"; case "age": return 10; case "work": return undefined; default: return value; ) ))); // "("name":"Bart","age":10)" // Exemple avec trois paramètres console.log(JSON.stringify(person, null, 2)); /* ( * "name": "Homer", * "age": 40, * "work": ( * "lieu": "Nuclear Plant", * "location": "Springfield" * ) * ) */

méthode parse()

La méthode parse() convertit la chaîne JSON en la valeur JavaScript correspondante.

Fonctionnalités de conversion :

  • Si une valeur indéfinie est rencontrée dans la chaîne JSON lors de la conversion, elle sera omise (non incluse dans le résultat).

Syntaxe

JSON.parse(texte[, relanceur])

Choix

chaîne de texte JSON à convertir en la valeur JavaScript correspondante. reviver (optionnel) La valeur du paramètre doit être une fonction. La fonction vous permet de remplacer la valeur d'une propriété de chaîne JSON avant de la renvoyer. La fonction doit contenir deux paramètres : le nom de la propriété et la valeur de la propriété. Le nom de la propriété est une chaîne. La fonction doit renvoyer la nouvelle valeur de la propriété.

Valeur de retour

La valeur JavaScript correspondante (valeur primitive, objet ou tableau).

Exemple

Analyse JSON("()"); // () JSON.parse("true"); // vrai JSON.parse(""); // Analyse JSON("null"); // nul

Qu'est-ce que JSON et de quoi est-il capable ? Dans cet article, vous apprendrez à utiliser JSON pour travail facile avec des données. Nous verrons également comment travailler avec JSON en utilisant PHP et JavaScript.

Si vous avez développé des sites Web ou des applications Web en général, il est probable que vous ayez entendu parler de JSON, du moins en passant. Mais que signifie exactement JSON ? Que peut faire ce format de données et comment l'utiliser ?

Dans cet article, nous allons apprendre les bases du travail avec le format json. Nous suivrons les sujets suivants :

  • Qu'est-ce que le format JSON ?
  • Comment créer des chaînes JSON ?
  • Un exemple simple de données JSON
  • Comparer JSON à XML

Commençons!

Qu'est-ce que le format JSON ?

JSON est un moyen simple, basé sur du texte, de stocker et de communiquer des données structurées. Avec une syntaxe simple, vous pouvez facilement enregistrer sous nombres simples et des chaînes et des tableaux, des objets, en utilisant rien de plus que du texte. Vous pouvez également lier des objets et des tableaux, ce qui vous permet de créer des structures de données complexes.

Après avoir créé une chaîne JSON, elle peut être facilement envoyée à n'importe quelle application ou ordinateur, car il ne s'agit que de texte.

JSON présente de nombreux avantages :

  • C'est compact
  • Il est lisible par l'homme et facile à lire par ordinateur.
  • Il peut être facilement converti en formats programmatiques : valeurs numériques, chaînes, format booléen, valeur nulle, tableaux et tableaux associatifs.
  • Presque tous les langages de programmation ont des fonctions qui vous permettent de lire et de créer le format de données json.

Littéralement, JSON signifie JavaScript Object Notation. Comme décrit précédemment, ce format est basé sur la création d'objets, quelque peu similaire aux tableaux associatifs dans d'autres langages de programmation.

A quoi sert JSON ?

Surtout, json est utilisé pour échanger des données entre javascript et côté serveur (php). En d'autres termes, pour la technologie ajax. Ceci est très pratique lorsque vous transmettez plusieurs variables ou des tableaux entiers de données.

À quoi cela ressemble dans l'exemple :

  1. L'utilisateur clique sur images miniatures
  2. JavaScript gère cet événement et envoie une requête ajax au script PHP, en transmettant l'ID de l'image.
  3. Sur le serveur, php récupère la description de l'image, le nom de l'image, l'adresse à grande image et d'autres informations de la base de données. Dès réception, il convertit au format JSON et le renvoie à la page de l'utilisateur.
  4. JavaScript reçoit la réponse sous forme de JSON, traite les données, les formulaires Code HTML et affiche une image agrandie avec une description et d'autres informations.

C'est ainsi que l'image est agrandie, sans recharger la page dans le navigateur. Ceci est très pratique lorsque nous avons besoin de recevoir des données partielles ou de transférer une petite quantité d'informations vers le serveur.

Le jQuery préféré de tous a les fonctions getJSON() et parseJSON() qui vous aident à travailler avec le format via des requêtes ajax.

Comment créer des chaînes JSON ?


Voici les règles de base pour créer des chaînes JSON :

  • La chaîne JSON contient à la fois un tableau de valeurs et un objet (un tableau associatif avec des paires nom/valeur).
  • Le tableau doit être entouré de crochets, [ et ], peut contenir une liste de valeurs séparées par une virgule.
  • Les objets entourés de manilles bouclées, ( et ), contiennent également des paires nom/valeur séparées par des virgules.
  • Les paires nom/valeur sont constituées du nom du champ (entre guillemets doubles) suivi de deux-points (:) suivi de la valeur du champ donné.
  • Les valeurs d'un tableau ou d'un objet peuvent être :
    • Numérique (entier ou décimal avec un point)
    • Chaînes (entre guillemets doubles)
    • Booléen (vrai ou faux)
    • Autres tableaux (entre crochets [ et ])
    • Autres objets (enroulés dans des bras en forme ( et ))
    • Valeur zéro(nul)

Important! Si vous utilisez des guillemets doubles dans les valeurs, échappez-les avec une barre oblique inverse : \". Vous pouvez également utiliser des caractères codés en hexadécimal, comme vous le faites dans d'autres langages de programmation.

Un exemple simple de données JSON

L'exemple suivant montre comment enregistrer des données dans le "panier" d'une boutique en ligne en utilisant le format JSON :

( "orderID": 12345, "shopperName": "John Smith", "shopperEmail": " [courriel protégé]", "contenu": [ ("productID": 34, "productName": "SuperWidget", "quantity": 1 ), ( "productID": 56, "productName": "WonderWidget", "quantity": 3 ) ], "commande terminée": vrai )

Décomposons ces données pièce par pièce :

  1. Au début et à la fin, nous utilisons des arcs bouclés ( et ), qui indiquent clairement qu'il s'agit d'un objet.
  2. A l'intérieur de l'objet, nous avons plusieurs paires nom/valeur :
  3. "numéro de commande": 12345- champ nommé orderId et valeur 12345
  4. "shopperName": "John Smith"- champ nommé shopperName et valeur John Smith
  5. " e-mail de l'acheteur": "[courriel protégé] Exemple.com"- comme dans le champ précédent, l'e-mail de l'acheteur est stocké ici.
  6. "Contenu": [ ... ]- un champ nommé content dont la valeur est un tableau.
  7. "commande terminée": vrai- un champ nommé orderCompleted dont la valeur est true
  8. À l'intérieur du tableau de contenu, nous avons deux objets qui affichent le contenu du panier. Chaque objet de produit a trois propriétés : productID, productName, quantity.

Enfin, puisque JSON est identique aux objets en JavaScript, vous pouvez facilement prendre cet exemple et créer un objet JavaScript à partir de celui-ci :

Comparer JSON à XML

Dans la plupart des cas, vous considérerez JSON comme une alternative à XML - du moins dans les applications Web. Le concept d'Ajax utilisait à l'origine XML pour communiquer entre le serveur et le navigateur, mais ces dernières années, JSON est devenu plus populaire pour transmettre des données ajax.

Alors que XML est une technologie éprouvée et utilisée par de nombreuses applications, les avantages du format JSON sont qu'il est plus compact et plus facile à écrire et à lire.

Voici l'exemple JSON ci-dessus, uniquement réécrit au format XML :

orderID 12345 shopperName John Smith shopperEmail [email protected] contents productID 34 productName SuperWidget quantity 1 productID 56 productName WonderWidget quantity 3 commande terminée vrai

Comme vous pouvez le voir, il est plusieurs fois plus long que JSON. En fait, cet exemple comporte 1128 caractères, alors que la version JSON ne comporte que 323 caractères. De plus, la version XML est plus difficile à lire.

Naturellement, on ne peut pas juger par un seul exemple, mais même de petites quantités d'informations prennent moins de place au format JSON qu'au format XML.

Comment travailler avec JSON via PHP et JS ?

Nous arrivons donc au plus intéressant - le côté pratique du format JSON. D'abord, rendons hommage à JavaScript, puis nous verrons comment nous pouvons manipuler JSON via PHP.

Créer et lire le format JSON avec JavaScript


Bien que le format JSON soit simple, il est difficile de l'écrire à la main lors du développement d'applications Web. De plus, vous devez souvent convertir des chaînes JSON en variables, puis les utiliser dans votre code.

Heureusement, de nombreux langages de programmation fournissent des outils pour travailler avec des chaînes JSON. L'idée principale dont:

Créationchaînes json, vous commencez avec des variables contenant des valeurs, puis vous les transmettez via une fonction qui transforme les données en une chaîne JSON.

En lisantchaînes json, vous commencez avec une chaîne JSON contenant certaines données, exécutez la chaîne via une fonction qui crée des variables contenant les données.

Voyons comment cela se fait en JavaScript.

Créer une chaîne JSON à partir d'une variable JavaScript

JavaScript a une méthode intégrée, JSON.stringify() , qui prend une variable javascript et renvoie une chaîne json représentant le contenu de la variable. Par exemple, utilisons l'objet créé précédemment, convertissez-le en une chaîne JSON.

Voici ce qui s'affichera à l'écran :

("orderID":12345,"shopperName":"John Smith","shopperEmail":" [courriel protégé]", "contenu":[("productID":34,"productName":"SuperWidget","quantity":1), ("productID":56,"productName":"WonderWidget","quantity":3) ], "commande terminée": vrai)

Notez que JSON.stringify() génère des chaînes JSON sans espaces. Difficile à lire, mais plus compact, ce qui est important lors du transfert de données.

Créer une variable JavaScript à partir de la chaîne JSON

Il existe plusieurs façons d'analyser les chaînes JSON, la plus acceptable et la plus sûre consiste à utiliser la méthode JSON.parse(). Il prend une chaîne JSON et renvoie un objet ou un tableau JavaScript contenant les données JSON. Voici un exemple:

Ici, nous avons créé une variable, jsonString, qui contient la chaîne JSON des exemples fournis précédemment. Ensuite, nous avons passé cette ligne via JSON.parse() pour créer un objet contenant des données JSON, qui sont stockées dans la variable cart. Enfin, nous vérifions la présence de données et affichons certaines informations à l'aide de la fenêtre d'alerte modale.

Les informations suivantes seront affichées :

Dans une application Web réelle, votre code JavaScript doit prendre une chaîne JSON en réponse du serveur (après l'envoi d'une requête AJAX), puis analyser la chaîne et afficher le contenu du panier à l'utilisateur.

Créer et lire le format JSON avec PHP


PHP, comme JavaScript, possède des fonctions qui vous permettent de convertir des variables au format JSON, et vice versa. Jetons un coup d'œil à eux.

Créer une chaîne JSON à partir d'une variable PHP

json_encode() prend une variable PHP et renvoie une chaîne JSON représentant les données de la variable. Voici notre exemple "cart" écrit en PHP :

12345, "shopperName" => "Jean Dupont", "shopperEmail" => " [courriel protégé]", "contents" => array(array("productID" => 34, "productName" => "SuperWidget", "quantity" => 1), array("productID" => 56, "productName" => " WonderWidget", "quantity" => 3)), "orderCompleted" => true); echo json_encode($cart); ?>

Ce code renvoie exactement le même résultat que l'exemple JavaScript : une chaîne JSON valide représentant le contenu des variables :

("orderID":12345,"shopperName":"John Smith","shopperEmail":" [courriel protégé]","contents":[("productID":34,"productName":"SuperWidget","quantity":1),("productID":56,"productName":"WonderWidget","quantity":3) ],"commande terminée":true)

En réalité, votre script PHP devrait envoyer une chaîne JSON en réponse à une requête AJAX, où JavaScript utilisera JSON.parse() pour transformer la chaîne en variables.

Dans la fonction json_encode(), vous pouvez spécifier des paramètres supplémentaires qui vous permettent de convertir certains caractères en hexadécimal.

Créer une variable PHP à partir d'une chaîne JSON

Semblable à ce qui précède, il existe une fonction json_decode() qui vous permet de décoder les chaînes JSON et de mettre le contenu dans des variables.

Courriel de l'acheteur. "
"; echo $cart->contenu->productName . "
"; ?>

Comme avec JavaScript, ce code affichera ce qui suit :

[courriel protégé] Widget Merveille

Par défaut, json_decode() renvoie les objets JSON en tant qu'objets PHP. Comme la syntaxe habituelle, nous utilisons -> pour accéder aux propriétés d'un objet.

Si vous souhaitez utiliser ultérieurement les données en tant que tableau associatif, transmettez simplement true comme deuxième paramètre à la fonction json_decode(). Voici un exemple:

$cart = json_decode($jsonString, true); echo $cart["shopperEmail"] . "
"; echo $cart["contents"]["productName"] . "
";

Cela produit le même résultat :

[courriel protégé] Widget Merveille

De plus, des arguments supplémentaires peuvent être passés à la fonction json_decode() pour déterminer le traitement des grands nombres et la récursivité.

En conclusion sur le format JSON

Si vous envisagez de créer une application Web utilisant la technologie Ajax, utilisez impérativement le format JSON pour échanger des données entre le serveur et le navigateur.


JavaScript Object Notation (JSON) est un format de texte standard pour représenter des données structurées basées sur la syntaxe d'objet JavaScript. Il est couramment utilisé pour transférer des données dans des applications Web (par exemple, envoyer des données d'un serveur à un client afin qu'elles puissent être affichées sur une page Web ou vice versa). Vous rencontrerez cela assez souvent, donc dans cet article, nous vous donnons tout ce dont vous avez besoin pour travailler avec JSON en utilisant JavaScript, y compris l'analyse du JSON afin que vous puissiez accéder aux données qu'il contient et créer du JSON.

Non, vraiment, qu'est-ce que JSON ?

Nous allons le charger dans notre page et utiliser quelques manipulations astucieuses du DOM pour l'afficher, comme ceci :

Obtenir JSON

Pour obtenir JSON, nous utiliserons une API appelée XMLHttpRequest (souvent appelée XHR). Il s'agit d'un objet JavaScript très utile qui nous permet de faire des requêtes réseau pour récupérer des ressources du serveur via JavaScript (par exemple, des images, du texte, JSON, même des extraits HTML), ce qui signifie que nous pouvons mettre à jour de petites sections de contenu sans avoir à recharger l'ensemble. page. Cela a abouti à des pages Web plus réactives et semble passionnant, mais cela dépasse malheureusement le cadre de cet article pour l'enseigner de manière beaucoup plus détaillée.

  1. Pour commencer, nous allons stocker l'URL JSON que nous voulons récupérer dans une variable. Ajoutez le code JavaScript suivant : var requestURL = "https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json" ;
  2. Pour créer une requête, nous devons créer une nouvelle instance d'objet de requête à partir du constructeur XMLHttpRequest en utilisant mot-clé Nouveau. Ajoutez votre dernière ligne ci-dessous : var request = new XMLHttpRequest();
  3. Nous devons maintenant ouvrir une nouvelle requête en utilisant le . Ajoutez la ligne suivante : request.open("GET", requestURL);

    Il faut au moins deux paramètres - il y en a d'autres Options disponibles. Nous n'avons besoin que de deux requis pour cela un exemple simple:

    • La méthode HTTP à utiliser lors d'une requête réseau. Dans ce cas, très bien, puisque nous ne faisons qu'extraire quelques données simples.
    • L'URL de la requête est l'URL du fichier JSON que nous avons enregistré précédemment.
  4. Ajoutez ensuite les deux lignes suivantes : nous définissons ici JSON afin que XHR sache que le serveur renverra JSON et qu'il doit être converti en arrière-plan en un objet JavaScript. Nous envoyons ensuite la requête avec la méthode : request.responseType="json"; demande envoyée();
  5. La dernière partie de cette section implique d'attendre une réponse de retour du serveur, puis de la gérer. Ajoutez le code suivant sous votre code précédent : request.onload = function() ( var superHeroes = request.response; populateHeader(superHeroes); showHeroes(superHeroes); )

Ici nous stockons la réponse à notre requête (disponible dans la propriété) dans la variable superHeroes ; cette variable contiendra désormais un objet JavaScript basé sur JSON ! Nous passons ensuite cet objet à deux appels de fonction - le premier remplira

corriger les données, et le second créera une carte d'information pour chaque héros de l'équipe et l'insérera dans
.

Nous avons enveloppé le code dans un gestionnaire d'événements qui se déclenche lorsque l'événement load se déclenche sur l'objet de requête (voir ) - c'est parce que l'événement load se déclenche lorsque la réponse revient avec succès ; le faire de cette façon garantit que request.response est définitivement disponible lorsque nous essayons de faire quelque chose avec.

Achèvement de l'en-tête

Maintenant que nous avons extrait les données JSON et les avons transformées en objet JavaScript, profitons-en en écrivant les deux fonctions que nous avons référencées ci-dessus. Tout d'abord, ajoutez la définition de fonction suivante sous le code précédent :

Function populateHeader(jsonObj) ( var myH1 = document.createElement("h1"); myH1.textContent = jsonObj["squadName"]; header.appendChild(myH1); var myPara = document.createElement("p"); myPara. textContent = "Ville natale : " + jsonObj["homeTown"] + " // Formé : " + jsonObj["formed"] ; header.appendChild(myPara); )

Nous avons nommé le paramètre jsonObj pour nous rappeler que cet objet JavaScript provient de JSON. Ici, nous créons d'abord un élément

avec , définissez-le égal à la propriété squadName de l'objet, puis ajoutez-le à l'en-tête avec . Nous effectuons ensuite une opération très similaire sur un paragraphe : créez-le, définissez son contenu textuel et ajoutez-le à l'en-tête. La seule différence est que son texte est donné sous la forme d'une chaîne concaténée contenant à la fois les propriétés homeTown et form de l'objet.

Créer des cartes d'informations sur les héros

Puis ajouter fonction suivante en bas du code qui crée et affiche les cartes de super-héros :

Fonction showHeroes(jsonObj) ( var heroes = jsonObj["members"]; for (var i = 0; i< heroes.length; i++) { var myArticle = document.createElement("article"); var myH2 = document.createElement("h2"); var myPara1 = document.createElement("p"); var myPara2 = document.createElement("p"); var myPara3 = document.createElement("p"); var myList = document.createElement("ul"); myH2.textContent = heroes[i].name; myPara1.textContent = "Secret identity: " + heroes[i].secretIdentity; myPara2.textContent = "Age: " + heroes[i].age; myPara3.textContent = "Superpowers:"; var superPowers = heroes[i].powers; for (var j = 0; j < superPowers.length; j++) { var listItem = document.createElement("li"); listItem.textContent = superPowers[j]; myList.appendChild(listItem); } myArticle.appendChild(myH2); myArticle.appendChild(myPara1); myArticle.appendChild(myPara2); myArticle.appendChild(myPara3); myArticle.appendChild(myList); section.appendChild(myArticle); } }

Tout d'abord, stockons la propriété members de l'objet JavaScript dans une nouvelle variable. Ce tableau contient plusieurs objets qui contiennent des informations pour chaque héros.

Nous utilisons ensuite pour parcourir chaque objet du tableau. Pour chacun d'eux nous :

  1. Créons quelques nouveaux éléments :
    ,

    , Trois

    Et

      .
    • Installation

      pour contenir le nom du héros actuel.

    • Nous remplissons trois paragraphes avec notre identité secrète, notre âge et une ligne qui dit "Superpouvoirs :" pour entrer des informations dans la liste.
    • Nous stockons la propriété powers dans une autre nouvelle variable appelée superPowers - celle-ci contient un tableau qui répertorie les superpuissances du héros actuel.
    • Nous utilisons une autre boucle for pour parcourir les super pouvoirs du héros actuel - pour chacun d'eux, nous créons un élément
    • , placez-y les super pouvoirs, puis placez le listItem à l'intérieur de l'élément
        (myList) avec appendChild() .
      • La dernière chose que nous faisons est d'ajouter

        ,

        Et

          à l'intérieur
          (monArticle) puis ajoutez
          dans
          . L'ordre dans lequel les éléments sont ajoutés est important, car c'est l'ordre dans lequel ils apparaîtront dans le code HTML.

Noter. Si vous rencontrez des difficultés pour suivre la notation point/crochet que nous utilisons pour accéder à un objet JavaScript, il peut être utile d'ouvrir le fichier superheroes.json dans un autre onglet ou dans éditeur de texte et référez-vous-y lorsque vous regardez notre JavaScript. Vous pouvez également consulter notre article pour Informations Complémentaires sur la notation des points et des parenthèses.

Convertir entre objets et texte

L'exemple ci-dessus était simple en termes d'accès à un objet JavaScript car nous avons fait une requête XHR pour convertir directement la réponse JSON en un objet JavaScript à l'aide de.

JSON (JavaScript Object Notation) est un format de transfert de données. Comme son nom l'indique, le format est basé sur le langage de programmation JavaScript, mais il est également disponible dans d'autres langages (Python, Ruby, PHP, Java).

JSON utilise l'extension .json. Lorsqu'il est utilisé dans d'autres format de fichier(par exemple, .html) La chaîne JSON est entre guillemets ou affectée à une variable. Ce format est facilement transférable entre un serveur Web et un client ou un navigateur.

Léger et facile à comprendre, JSON est une excellente alternative à XML.

Ce guide vous présentera les avantages, les installations, structure globale et la syntaxe JSON.

Syntaxe et structure JSON

L'objet JSON se présente sous la forme d'une clé-valeur et est généralement écrit entre accolades. Lorsque vous travaillez avec JSON, tous les objets sont stockés dans un fichier .json, mais ils peuvent également exister en tant qu'objets séparés dans le contexte d'un programme.

L'objet JSON ressemble à ceci :

"prénom" : "Jean",
"nom_de_famille" : "Smith",
"lieu" : "Londres",
"en ligne" : vrai
"abonnés" : 987

Ceci est un exemple très simple. Un objet JSON peut contenir plusieurs chaînes.

Comme vous pouvez le voir, l'objet se compose de paires clé-valeur, qui sont entourées d'accolades. La plupart des données dans JSON sont écrites sous forme d'objets.

Un deux-points est placé entre la clé et la valeur. Chaque paire doit être suivie d'une virgule. Le résultat est:

"clé" : "valeur", "clé" : "valeur", "clé" : "valeur"

La clé en JSON est à gauche. La clé doit être placée entre guillemets doubles. Toute chaîne valide peut être utilisée comme clé. Au sein d'un objet, toutes les clés doivent être uniques. La clé peut contenir un espace ("prénom"), mais lors de la programmation, il peut y avoir des problèmes pour accéder à une telle clé. Par conséquent, au lieu d'un espace, il est préférable d'utiliser un trait de soulignement ("first_name").

Les valeurs JSON se trouvent sur le côté droit de la colonne. Tout type de données simple peut être utilisé comme valeur :

  • Cordes
  • Nombres
  • Objets
  • Tableaux
  • Données booléennes (vrai ou faux)

Les valeurs peuvent également être représentées par des types de données complexes (tels que des objets ou des tableaux JSON).

JSON prend en charge la syntaxe individuelle de chacun des types de données répertoriés ci-dessus : si la valeur est une chaîne, elle sera entre guillemets, et si c'est un nombre, elle ne le sera pas.

En règle générale, les données des fichiers .json sont écrites dans une colonne, mais JSON peut également être écrit dans une ligne :

( "first_name" : "John", "last_name": "Smith", "online" : vrai, )

C'est ainsi que les données JSON sont généralement écrites dans un autre type de fichier.

En écrivant des données JSON dans une colonne, vous améliorez la lisibilité du fichier (surtout s'il contient beaucoup de données). JSON ignore les espaces entre les colonnes, vous pouvez donc les utiliser pour diviser les données en un nombre de colonnes lisible par l'homme.

"prénom" : "Jean",
"nom_de_famille" : "Smith",
"en ligne" : vrai

Notez que les objets JSON sont très similaires aux objets JavaScript, mais ils n'ont pas le même format. Par exemple, vous pouvez utiliser des fonctions en JavaScript, mais pas en JSON.

Le principal avantage de JSON est que les données dans ce format sont prises en charge par de nombreux langages de programmation populaires, de sorte qu'elles peuvent être transférées rapidement.

Vous êtes maintenant familiarisé avec la syntaxe JSON de base. Mais les fichiers JSON peuvent avoir une structure hiérarchique complexe qui comprend des tableaux et des objets imbriqués.

Types complexes en JSON

JSON peut stocker des objets imbriqués et des tableaux qui seront transmis comme valeur de la clé qui leur est attribuée.

objets imbriqués

Vous trouverez ci-dessous un exemple - le fichier users.json, qui contient des données sur les utilisateurs. Pour chaque utilisateur

("john", "jesse", "drew", "jamie") comme valeur, un objet imbriqué est passé, qui, à son tour, se compose également de clés et de valeurs.

Noter: Le premier objet JSON imbriqué est surligné en rouge.

"Jean" :(
"nom d'utilisateur" : "Jean",
"lieu" : "Londres",
"en ligne" : vrai
"abonnés" : 987

"jessé" :(
"nom d'utilisateur" : "Jesse",
"lieu" : "Washington",
"en ligne" : faux
"abonnés" : 432

"a dessiné" :(
"nom d'utilisateur" : "Drew",
"lieu" : "Paris",
"en ligne" : faux
"abonnés" : 321

"Jamie" :(
"nom d'utilisateur" : "Jamie",
"lieu" : "Berlin",
"en ligne" : vrai
"abonnés" : 654

Notez que les accolades sont utilisées dans les objets imbriqués et principaux. Les virgules sont utilisées dans les objets imbriqués de la même manière que dans les objets ordinaires.

Tableaux imbriqués

Les données peuvent être intégrées dans JSON à l'aide de tableaux JavaScript, qui seront transmis en tant que valeurs. JavaScript utilise des crochets () au début et à la fin d'un tableau. Un tableau est une collection ordonnée de données pouvant contenir des données de différents types.

Un tableau est utilisé pour transférer un grand nombre données pouvant être regroupées. Par exemple, essayons d'enregistrer les données de l'utilisateur.

{
"prénom" : "Jean",
"nom_de_famille" : "Smith",
"lieu" : "Londres",
"sites Internet" : [

"description" : "travail",
"URL" : "https://www.johnsmithsite.com/"

},
{

"description" : "tutoriels",
"URL" : "https://www.johnsmithsite.com/tutorials"

"des médias sociaux" : [

"description" : "twitter",
"lien" : "https://twitter.com/johnsmith"

"description" : "facebook",
"lien" : "https://www.facebook.com/johnsmith"

"description" : "github",
"lien" : "https://github.com/johnsmith"

Les clés "websites" et "social_media" reçoivent des tableaux sous forme de valeurs, qui sont placées entre crochets.

Avec des tableaux et des objets imbriqués, vous pouvez créer une hiérarchie de données complexe.

JSON ou XML ?

XML (eXtensible Markup Language) vous permet de stocker des données sous une forme qui convient à la perception humaine et machine. Le format XML est supporté par un grand nombre de langages de programmation.

XML et JSON ont beaucoup en commun. Cependant, XML nécessite beaucoup plus de texte, donc les fichiers sont plus volumineux et plus difficiles à lire et à écrire. De plus, XML n'est traité qu'avec un interpréteur XML, tandis que JSON peut être traité avec une simple fonction. Contrairement à JSON, XML ne peut pas stocker de tableaux.

Comparons deux fichiers : ils contiennent les mêmes données, mais le premier est écrit au format XML et le second est écrit en JSON.

utilisateurs.xml

John Londres

Jessé Washington

A dessiné Paris

Jamie Berlin

utilisateurs.json
("utilisateurs": [

("nom d'utilisateur" : "John", "lieu" : "Londres"),
("nom d'utilisateur" : "Jesse", "lieu" : "Washington"),
("nom d'utilisateur" : "Drew", "lieu" : "Paris"),
("nom d'utilisateur" : "JamieMantisShrimp", "lieu" : "Berlin")

JSON est un format très compact et ne nécessite pas autant de balises que XML. De plus, XML, contrairement à JSON, ne prend pas en charge les tableaux.

Si vous êtes familier avec HTML, vous remarquerez que Format XML très similaire (en particulier les balises). JSON est plus simple, nécessite moins de texte et est plus facile à utiliser, par exemple, dans les applications AJAX.

Bien entendu, le format doit être choisi en fonction des besoins de l'application.

Outils JSON

JSON est couramment utilisé dans JavaScript, mais le format est largement utilisé dans d'autres langages de programmation.

Vous trouverez plus d'informations sur la compatibilité et la gestion de JSON sur le site du projet et dans la bibliothèque jQuery.

Il est rare d'écrire JSON à partir de zéro. En règle générale, les données sont chargées à partir de sources ou converties en JSON. Vous pouvez convertir des données CSV ou délimitées par des tabulations en JSON avec outil ouvert M. convertisseur de données. Pour convertir XML en JSON et vice versa, utilisez utilities-online.info . Lorsque vous travaillez avec des outils automatiques, assurez-vous de vérifier le résultat.

Les fichiers JSON (y compris les données converties) peuvent être validés à l'aide du service JSONLint. Pour tester JSON dans un contexte de développement Web, reportez-vous à JSFiddle .

Conclusion

JSON est un format de données simple et léger. Les fichiers JSON sont faciles à transférer, à stocker et à utiliser.

Aujourd'hui, JSON est souvent utilisé dans les API.

Vous devez avoir entendu parler de JSON auparavant. Qu'est-ce que c'est? Que peut-il faire et comment peut-il être utilisé ?

Dans cette leçon, nous couvrirons les bases de JSON et aborderons les points suivants :

  • Qu'est-ce que JSON ?
  • A quoi sert JSON ?
  • Comment créer une chaîne JSON ?
  • Un exemple de chaîne JSON simple.
  • Comparons JSON et XML.
  • Comment travailler avec JSON en JavaScript et PHP ?

Qu'est-ce que JSON ?

JSON est un moyen simple, basé sur du texte, de stocker et de communiquer des données structurées. Avec une syntaxe simple, vous pouvez facilement stocker n'importe quoi, d'un nombre unique à des chaînes, des tableaux et des objets en texte brut. Vous pouvez également lier des tableaux et des objets pour créer des structures de données complexes.

Une fois qu'une chaîne JSON a été créée, il est facile de l'envoyer à une autre application ou à un autre emplacement sur le réseau car il s'agit de texte brut.

JSON présente les avantages suivants :

  • Il est compact.
  • Ses phrases sont faciles à lire et à composer par l'homme et l'ordinateur.
  • Il peut être facilement converti en une structure de données pour la plupart des langages de programmation (nombres, chaînes, booléens, tableaux, etc.)
  • De nombreux langages de programmation ont des fonctions et des bibliothèques pour lire et créer des structures JSON.

Le nom JSON signifie JavaScript Object Notation (représentation d'objets JavaScript). Comme son nom l'indique, il est basé sur la façon dont les objets sont définis (très similaire à la création de tableaux associatifs dans d'autres langages) et les tableaux.

A quoi sert JSON ?

L'utilisation la plus courante de JSON consiste à envoyer des données du serveur au navigateur. En règle générale, les données JSON sont livrées à l'aide d' AJAX , ce qui permet au navigateur et au serveur d'échanger des données sans avoir à recharger la page.

  1. L'utilisateur clique sur une vignette de produit dans une boutique en ligne.
  2. Le JavaScript s'exécutant sur le navigateur envoie une requête AJAX au script PHP s'exécutant sur le serveur, en transmettant l'ID du produit sélectionné.
  3. Le script PHP obtient le nom du produit, sa description, son prix et d'autres informations de la base de données. Il compose ensuite une chaîne JSON à partir des données et l'envoie au navigateur.
  4. Le JavaScript exécuté sur le navigateur reçoit la chaîne JSON, la décode et affiche les informations sur le produit sur la page pour l'utilisateur.

Vous pouvez également utiliser JSON pour envoyer des données du navigateur au serveur en transmettant la chaîne JSON en tant que paramètre dans les requêtes GET ou POST. Mais cette méthode est moins courante, car la transmission de données via des requêtes AJAX peut être simplifiée. Par exemple, l'ID du produit peut être inclus dans Adresse URL dans le cadre d'une requête GET.

La bibliothèque jQuery possède plusieurs méthodes, telles que getJSON() et parseJSON() , qui facilitent la récupération de données à l'aide de JSON via des requêtes AJAX.

Comment créer une chaîne JSON ?

Il existe quelques règles de base pour créer une chaîne JSON :

  • La chaîne JSON contient soit un tableau de valeurs, soit un objet (un tableau associatif de paires nom/valeur).
  • déployer est entre crochets ([ et ]) et contient une liste de valeurs séparées par des virgules.
  • Un objet est entouré d'accolades (( et )) et contient une liste de paires nom/valeur séparées par des virgules.
  • couple nom/valeur se compose du nom du champ entre guillemets doubles, suivi de deux-points (:) et de la valeur du champ.
  • Sens dans un tableau ou un objet peut être :
    • Nombre (entier ou virgule flottante)
    • Chaîne (entre guillemets doubles)
    • Valeur booléenne (vrai ou faux)
    • Un autre tableau (entre crochets)
    • Un autre objet (entre accolades)
    • valeur nulle

Pour inclure des guillemets doubles dans une chaîne, vous devez utiliser une barre oblique inverse : \" . Comme dans de nombreux langages de programmation, vous pouvez placer des caractères de contrôle et des codes hexadécimaux dans une chaîne en les faisant précéder d'une barre oblique inverse. Consultez le site JSON pour plus de détails.

Exemple de chaîne JSON simple

Voici un exemple de paiement au format JSON :

( "orderID": 12345, "shopperName": "Vanya Ivanov", "shopperEmail": " [courriel protégé]", "contents": [ ("productID": 34, "productName": "Super produit", "quantity": 1 ), ( "productID": 56, "productName": "Produit miracle", "quantity": 3 ) ], "commande terminée": vrai )

Regardons la ligne en détail :

  • Nous créons un objet en utilisant des accolades (( et )).
  • Il existe plusieurs paires nom/valeur dans l'objet : "orderID": 12345 Propriété avec le nom "orderId" et la valeur entière 12345 "shopperName": Propriété "Vanya Ivanov" avec le nom "shopperName" et la valeur de chaîne "Vanya Ivanov" "shopperEmail" : " [courriel protégé]" Propriété nommée "shopperEmail" avec une valeur de chaîne " [courriel protégé]" "contents": [ ... ] Propriété nommée "contents" dont la valeur est un tableau "orderCompleted": true Propriété nommée "orderCompleted" avec la valeur booléenne true
  • Il y a 2 objets dans le tableau "contenu" représentant les articles de la commande. Chaque objet contient 3 propriétés : productID , productName et quantity .

Au fait, étant donné que JSON est basé sur la déclaration d'objets JavaScript, vous pouvez rapidement et facilement transformer la chaîne JSON ci-dessus en objet JavaScript :

Comparer JSON et XML

À bien des égards, vous pouvez considérer JSON comme une alternative à XML, du moins dans le domaine des applications Web. Le concept d'AJAX était à l'origine basé sur l'utilisation de XML pour transférer des données entre un serveur et un navigateur. Mais ces dernières années, JSON est devenu de plus en plus populaire pour le transfert de données AJAX.

Alors que XML est une technologie éprouvée qui a été utilisée dans un bon nombre d'applications, JSON a l'avantage d'être un format de données plus compact et plus facile à reconnaître.

Voici à quoi ressemblerait l'exemple d'objet XML ci-dessus :

orderID 12345 shopperName Ваня Иванов shopperEmail [email protected] contents productID 34 productName Супер товар quantity 1 productID 56 productName Чудо товар quantity 3 commande terminée vrai

La version XML est nettement plus grande. Il contient en fait 1128 caractères, tandis que la variante JSON ne comporte que 323 caractères. La version XML est également difficile à comprendre.

Bien sûr, c'est un exemple radical. Et il est possible de créer une entrée XML plus compacte. Mais même il sera nettement plus long que l'équivalent JSON.

Travailler avec une chaîne JSON en JavaScript

JSON a un format simple, mais la création manuelle d'une chaîne JSON est assez fastidieuse. De plus, vous devez souvent prendre une chaîne JSON, convertir son contenu en une variable pouvant être utilisée dans le code.

La plupart des langages de programmation disposent d'outils pour convertir facilement des variables en chaînes JSON et vice versa.

Créer une chaîne JSON à partir d'une variable

JavaScript a une méthode intégrée JSON.stringify() qui prend une variable et renvoie une chaîne JSON représentant son contenu. Par exemple, créons un objet JavaScript qui contient les détails de la commande de notre exemple, puis créons une chaîne JSON à partir de celui-ci :

Ce code donnera :

Notez que la méthode JSON.stringify() renvoie une chaîne JSON sans espaces. C'est plus difficile à lire, mais c'est plus compact pour la transmission sur un réseau.

Il existe plusieurs façons d'analyser une chaîne JSON en JavaScript, mais la plus sûre et la plus fiable consiste à utiliser la méthode intégrée JSON.parse(). Il prend une chaîne JSON et renvoie un objet ou un tableau JavaScript contenant les données. Par exemple:

Nous avons créé une variable jsonString qui contient la chaîne JSON de notre exemple de commande. Nous transmettons ensuite cette chaîne à la méthode JSON.parse(), qui crée un objet contenant les données JSON et les stocke dans la variable cart. Il ne reste plus qu'à tester en imprimant les propriétés de l'objet shopperEmail et le productName du tableau de contenu.

En conséquence, nous obtiendrons la sortie suivante :

Dans une application réelle, votre code JavaScript recevra la commande sous forme de chaîne JSON dans une réponse AJAX du script du serveur, transmettra la chaîne à la méthode JSON.parse(), puis utilisera les données pour l'afficher sur la page de l'utilisateur.

JSON.stringify() et JSON.parse() ont d'autres fonctionnalités, telles que l'utilisation de fonctions de rappel pour personnaliser la conversion de certaines données. Ces options sont très pratiques pour convertir diverses données en objets JavaScript valides.

Travailler avec une chaîne JSON en PHP

PHP, comme JavaScript, a des fonctions intégrées pour travailler avec des chaînes JSON.

Créer une chaîne JSON à partir d'une variable PHP

La fonction json_encode() prend une variable PHP et renvoie une chaîne JSON représentant le contenu de la variable. Voici notre exemple de commande écrit en PHP :

12345, "shopperName" => "Vanya Ivanov", "shopperEmail" => " [courriel protégé]", "contents" => array(array("productID" => 34, "productName" => "Super produit", "quantity" => 1), array("productID" => 56, "productName" => "produit miracle", "quantité" => 3)), "orderCompleted" => vrai); echo json_encode($cart); ?>

Code donné renvoie exactement la même chaîne JSON que dans l'exemple JavaScript :

("orderID":12345,"shopperName":"Vanya Ivanov","shopperEmail":" [courriel protégé]","contents":[("productID":34,"productName":"Super produit","quantity":1),("productID":56,"productName":"Wonder Product","quantity": 3)],"commande terminée":true)

Dans une application réelle, votre Script PHP enverra ligne donnée JSON dans le cadre de la réponse AJAX au navigateur, où le code JavaScript utilise la méthode JSON.parse() pour le reconvertir en une variable à afficher sur la page de l'utilisateur.

Vous pouvez passer divers drapeaux comme deuxième argument à la fonction json_encode(). Avec leur aide, vous pouvez modifier les principes d'encodage du contenu des variables dans une chaîne JSON.

Créer une variable à partir d'une chaîne JSON

La méthode json_decode() est utilisée pour convertir une chaîne JSON en une variable PHP. Remplaçons notre exemple JavaScript par la méthode JSON.parse() avec du code PHP :

Courriel de l'acheteur. "
"; echo $cart->contenu->productName . "
"; ?>

Quant au JavaScript, ce code produira :

[courriel protégé] produits miracles

Par défaut, la fonction json_decode() renvoie les objets JSON en tant qu'objets PHP. Il existe des objets PHP génériques de classe stdClass . C'est pourquoi nous utilisons -> pour accéder aux propriétés de l'objet dans l'exemple ci-dessus.

Si vous avez besoin d'un objet JSON sous la forme d'un tableau PHP associé, vous devez passer true comme deuxième argument à la fonction json_decode(). Par exemple:

$cart = json_decode($jsonString, true); echo $cart["shopperEmail"] . "
"; echo $cart["contents"]["productName"] . "
";

Ce code produira la même sortie :

[courriel protégé] produits miracles

Vous pouvez également passer d'autres arguments à la fonction json_decode() pour spécifier la profondeur de la récursivité et la manière dont les grands entiers sont gérés.

Conclusion

Bien que JSON soit facile à comprendre et à utiliser, c'est un outil très utile et flexible pour transmettre des données entre des applications et des ordinateurs, en particulier lors de l'utilisation d'AJAX. Si vous envisagez de développer une application AJAX, il ne fait aucun doute que JSON sera l'outil le plus important de votre atelier.

© Copyright 2022, Mastering PC - Internet. Skype. Réseaux sociaux. Tutoriels Windows