Informatique


Créer un objet au format JSON

Aller à

Qu'est-ce que le format JSON ?

JSON (JavaScript Object Notation – Notation Objet issue de JavaScript) est un format léger d'échange de données. Il est facile à lire ou à écrire pour des humains. Il est aisément analysable ou générable par des machines.

JSON est un format texte complètement indépendant de tout langage, mais les conventions qu'il utilise seront familières à tout programmeur habitué aux langages descendant du C, comme par exemple : C lui-même, C++, C#, Java, JavaScript, Perl, Python et bien d'autres.

Ces propriétés font de JSON un langage d'échange de données idéal.


Créer un objet JSON avec {}

Affecter une variable avec une paire d'accolades permet de créer un objet.

Exemples 1

Démo
	<h2>Créer un objet avec {}</h2>
	<script>
	var eleve={};
	console.log(typeof eleve);
	</script>

Cet objet n'a ni propriété ni méthode, mais c'est un objet.

Exemples 2: avec des propriétés

Démo
	<h2>Créer un objet avec des propriétés avec {}</h2>
	<script>
		var eleve={
			nom:"Desproges",
			prenom:"Lucien",
		};
		//On ajoute une propriété à la volée
		eleve.dnaiss="17/05/1962";
	document.write("Nom: ",eleve.nom," Prenom: ",eleve.prenom, "Anniversaire: " eleve.dnaiss);
	</script>

Cet objet n'a que des propriétés:

  • le nom de la propriété est suivi de 2 points et la valeur associée à cette propriété
  • les propriétés et les méthodes sont séparées par des virgules
  • on peut ajouter, "à la volée", une propriété ou une méthode après avoir déclaré l'objet
  • il n'existe aucune limite quant au nombre de propriétés possibles
  • la valeur chargée dans une propriété peut être de n'importe quel type
  • si aucune valeur n'est affectée à la propriété celle-ci sera undefined
Exemples 3: avec une propriété de type object

Démo
	<h2>Créer un objet avec une propriété de type object</h2>
	<script>
	var eleve={
		nom:"Desproges",
		prenom:"Lucien",
		adresse:{rue:"de la Ruche",num:"30",codep:"1030",commune:"Schaerbeek"},
	};
	eleve.dnaiss="17/05/1962";
	document.write("Nom: ",eleve.nom," Prenom: ",eleve.prenom, " Anniversaire: ", eleve.dnaiss);
	document.write("<br>");
	document.write("Adresse: rue ",eleve.adresse.rue,", ",eleve.adresse.num," ", eleve.adresse.codep," ",eleve.adresse.commune);
	</script>

Exemples 4: avec des propriétés et des méthodes

Démo
	<h2>Créer un objet avec des propriétés et des méthodes</h2>
	<script>
	var eleve={
		nom:"Desproges",
		prenom:"Lucien",
		adresse:{rue:"de la Ruche",num:"30",codep:"1030",commune:"Schaerbeek"},
		affic:function(){
			document.write("Nom: ",this.nom," Prenom: ",this.prenom, " Anniversaire: ", this.dnaiss);
			document.write("<br>");
			document.write("Adresse: rue ",this.adresse.rue,", ",this.adresse.num," ", this.adresse.codep," ",this.adresse.commune);
			}
	};
	eleve.dnaiss="17/05/1962";
	eleve.affic();
	</script>

On constate:

  • on déclare une méthode comme une propriété, on affecte simplement une fonction
  • la fonction est anonyme ou non
  • une fonction anonyme est une fonction auquelle on a pas attribué de nom
  • les parenthèses de la fonction peuvent acceuillir des paramètres
  • le mot clé this représente l'objet sur lequel on va appliquer la méthode
  • dans ce cas on aurait pu écrire eleve.nom, eleve.prenom etc. car eleve est l'objet lui-même et pas un constructeur

Le mot clé this représente l'objet pour lequel on désire accéder à une propriété ou une méthode.


La méthode stringify()

Cette méthode permet de chaîner l'objet JSON passer en paramètre, ce chaînage peut ensuite être récupérer dans beaucoup de langages de programmation.

Démo
<h2>La méthode stringify()</h2>
<script>
var eleve={
nom:"Desproges",
prenom:"Lucien",
adresse:{rue:"de la Ruche",num:"30",codep:"1030",commune:"Schaerbeek"},
affic:function(){
	document.write("Nom: ",this.nom," Prenom: ",this.prenom, " Anniversaire: ", this.dnaiss);
	document.write("<br>");
	document.write("Adresse: rue ",this.adresse.rue,", ",this.adresse.num," ", this.adresse.codep," ",this.adresse.commune);
	}
};
var chaine=JSON.stringify(eleve);
document.write(chaine);
	</script>

On constate que la propriété affic n'apparaît pas dans la variable chaîne, c'est normal! Seules les propriétés sont compatibles avec le format d'échange JSON.


La méthode parse()

Cette méthode récupère une chaîne de caractères au format JSON et retourne l'objet correspondant

Démo
<h2>La méthode parse()</h2>
<script>
var chaine='{"nom":"Desproges","prenom":"Lucien","adresse":{"rue":"de la Ruche","num":"30","codep":"1030","commune":"Schaerbeek"}}';
var eleve=JSON.parse(chaine);
console.log(eleve);
</script>

On passe une chaîne de caractères à la méthode parse(), ne pas oublier la quote au début et à la fin !