Tutoriel JSON - Apprenez à utiliser JSON avec JavaScript

Dans ce didacticiel, nous allons en apprendre davantage sur JSON. Nous couvrirons la structure JSON, les différents types de données et comment utiliser JSON dans JavaScript.

JSON est l'un des concepts les plus importants que vous pouvez apprendre en tant que programmeur ou en tant que QA.

Tout au long de votre carrière de programmeur, vous allez utiliser JSON tout le temps, qu'il s'agisse de créer une API, de consommer une API ou de créer des fichiers de configuration pour votre application.




Qu'est-ce que JSON

JSON, qui signifie notation objet JavaScript, est simplement un format de représentation de données très similaire à XML ou YAML.

Il est largement utilisé sur Internet pour presque toutes les API auxquelles vous aurez accès, ainsi que pour les fichiers de configuration et des éléments tels que les jeux et les éditeurs de texte.


Un exemple de JSON:

#user.json {
'name': 'Steve',
'age': 43,
'isProgrammer' true,
'hobbies': ['Reading Java books', 'cooking', 'classic music'],
'friends': [{
'name': 'joey',
'age': 39,
'isProgrammer': false,
'friends': [...]
}] }


Pourquoi utiliser JSON

Nous utilisons JSON car il est extrêmement léger pour envoyer des requêtes et des réponses http en raison de la petite taille du fichier.

Il est facile à lire par rapport à quelque chose comme XML car il est beaucoup plus propre et il n'y a pas autant de balises d'ouverture et de fermeture à craindre.

JSON s'intègre également très bien avec JavaScript car JSON n'est qu'un sous-ensemble de JavaScript, ce qui signifie que tout ce que vous écrivez dans un JSON est un JavaScript valide.


Presque chaque langue principale possède une forme de bibliothèque ou de fonctionnalité intégrée pour analyser les chaînes JSON en objets ou en classes dans cette langue.

Cela rend le travail avec des données JSON extrêmement facile à l'intérieur d'un langage de programmation.



Types de données JSON

Maintenant que nous comprenons ce qu'est JSON et pourquoi il est important, passons à la syntaxe impliquée et aux types de données que JSON peut représenter.

Comme nous le savons, JSON est un format de représentation de données, nous devons donc être en mesure de représenter certains types de données en son sein.


JSON prend en charge nativement:

  • cordes
  • Nombres les nombres peuvent être dans n'importe quel format, qu'il s'agisse de nombres décimaux nombres entiers nombres négatifs même de nombres en notation scientifique
  • booléens qui peut être vrai ou faux
  • nul qui ne signifie essentiellement rien
  • Tableaux qui peut être une liste de l'un des types ci-dessus
  • Objets un objet est le type le plus complexe mais le plus utilisé dans json car il vous permet de représenter des données qui sont des paires valeur / clé


Exemple JSON

Découvrons un exemple d'utilisation de json dans un fichier.

La première chose à faire est de créer un fichier avec .json extension à la fin de celui-ci.

Nous allons créer un user.json fichier avec un objet utilisateur représenté sous forme de JSON.


Pour créer un objet, nous devons utiliser des accolades ouvrantes et fermantes {} puis à l'intérieur de cela, nous mettrons toutes les paires valeur / clé qui composent notre objet.

Chaque propriété à l'intérieur du JSON est une paire clé / valeur. La clé doit être entourée d'un double '' guillemets suivis de deux points : puis la valeur de cette clé.

Si nous avons plusieurs paires valeur / clé, nous avons besoin de virgules , séparer chacune de nos paires clé-valeur, de la même manière que nous créerions un tableau dans un langage de programmation normal.

Exemple de fichier JSON

#user.json {
'name': 'Steve',
'age': 43,
'isProgrammer' true,
'hobbies': ['Reading Java books', 'cooking', 'classic music'],
'friends': [{
'name': 'joey',
'age': 39,
'isProgrammer': false,
'friends': [...]
}] }

Dans l'exemple ci-dessus, nous avons un fichier appelé user.json. À l'intérieur du fichier, nous avons différents types de données.


Les clés sont toujours entourées de guillemets doubles. Pour les valeurs, seul le type chaîne est entouré de guillemets doubles.

Dans l'exemple:

  • le nom est string
  • l'âge est integer
  • isProgrammer est boolean
  • hobbies est un Array
  • amis est un Array of Objects
Noter:Il n'y a pas de virgule à la fin de la dernière propriété du fichier JSON ou d'un objet JSON.

Comment utiliser la chaîne JSON dans JavaScript

Supposons que nous ayons un fichier JSON appelé companies.json qui est un tableau d'objets d'entreprise:

[
{
'name': 'Big corporate',
'numberOfEmployees': 1000,
'ceo': 'Neil',
'rating': 3.6
},
{
'name': 'Small startup',
'numberOfEmployees': 10,
'ceo': null,
'rating': 4.3
} ]

Dans l'exemple ci-dessus, nous avons deux objets société dans un tableau JSON.

Voyons maintenant comment nous pouvons utiliser le JSON ci-dessus dans un JavaScript.

Dans la plupart des scénarios, nous obtenons un JSON sous forme de chaîne plutôt qu'un objet JSON. Pour émuler cela, nous représentons le JSON ci-dessus sous la forme d'une chaîne à l'intérieur du JavaScript.

Notre fichier html ressemble à:


JSON Example

let companies =
`[
{

'name': 'Big corporate',

'numberOfEmployees': 1000,

'ceo': 'Neil',

'rating': 3.6
},
{

'name': 'Small startup',

'numberOfEmployees': 10,

'ceo': null,

'rating': 4.3
}
]`
console.log(JSON.parse(companies))

Lorsque nous inspectons le journal de la console dans les outils de développement Chrome, le résultat est similaire à ce qui est illustré ci-dessous:

Exemple javascript JSON

Ensuite, nous pouvons analyser le JSON ci-dessus en spécifiant ce que nous voulons extraire. Par exemple, si nous voulions obtenir le nom de la première société du tableau, nous utiliserions:

console.log(JSON.parse(
companies[0].name )) Output: Big corporate

De même, pour obtenir la note de la deuxième entreprise, nous utiliserions:

console.log(JSON.parse(
companies[1].rating )) Output: 4.3

Comment convertir un objet JavaScript en JSON

Supposons maintenant que nous ayons un objet JavaScript comme celui illustré ci-dessous:


JSON Example

var person = {
name: 'Brad',
age: 35
}

Pour convertir l'objet JavaScript person en JSON, nous utilisons stringify méthode:

jsonPerson = JSON.stringify(person);

La sortie est un JSON valide:

{
'name': 'Brad',
'age': 35 }
Noter:console.log(jsonPerson.name) impressions indéfini . Pour obtenir la valeur, nous devons reconvertir le JSON en objet JavaScript.

Pour faire fonctionner ce qui précède, nous devons reconvertir le JSON en objet JavaScript.

Comment convertir un objet JSON en JavaScript

Pour reconvertir l'objet JSON ci-dessus en JavaScript, nous utilisons le parse méthode:

jsPerson = JSON.parse(jsonPerson) Noter:Maintenant, si nous avons essayé console.log(jsPerson.name) nous obtenons «Brad».

Exemple complet


JSON Example

var person = {
name: 'Brad',
age: 35
}
jsonPerson = JSON.stringify(person); //convert to JSON
console.log(jsonPerson.name); //undefined
jsPerson = JSON.parse(jsonPerson); //convert to JS Object
console.log(jsPerson.name); //Brad


Résumé

  • JSON signifie JavaScript Object Notation
  • Format d'échange de données léger
  • Basé sur un sous-ensemble de JavaScript
  • Facile à lire et à écrire
  • Indépendant de la langue
  • Peut être analysé dans la plupart des langages de programmation modernes

Types de données:

  • Nombre: Aucune différence entre entier et flottant
  • Chaîne: Chaîne de caractères Unicode. Utilisez des guillemets doubles
  • Booléen: Vrai ou faux
  • Déployer: Liste ordonnée de 0 valeurs ou plus dans []
  • Objet: Collection non ordonnée de paires clé / valeur
  • Nul: Valeur vide

Règles de syntaxe JSON:

  • Utilise des paires clé / valeur - par ex. {'name': 'value'}
  • Utilise des guillemets doubles autour CLÉ
  • Doit utiliser les types de données spécifiés
  • Le type de fichier est .json
  • Le type MIME est 'Application / json'

J'espère que vous avez trouvé ce tutoriel JSON avec Javascript utile. Vous pouvez désormais écrire des fichiers JSON simples et complexes et interagir avec des chaînes JSON dans JavaScript.