* Amis développeur confirmé, passe ton chemin 🙂 *
J’entends souvent dans mon entourage des trucs qui me perturbent par rapport au JSON, c’est pourquoi je me suis dit qu’une petite piqure de rappel concernant ce formidable outil pourrait peut être démystifier quelque chose d’aussi bête et simple que le JSON.
JSON c’est quoi ?
Non ! le JSON n’est pas un langage, ni une forme de magie obscure et laborieuse, c’est juste un format de données, c’est a dire un texte à plat qui respecte une certaine structure pour véhiculer facilement et légèrement les informations.
Nb: En bon frenchy, le JSON se prononce “dJisône” et signifie “JavaScript Object Notation” car il est issue de la notation objet utilisée en javascript.
Les gros point fort du JSON:
* Étant donné qu’il s’agit d’une simple chaine de caractère, il fonctionne sous tous les environnements et tous les langages qui peuvent gérer du texte (et ça fait un paquet d’endroits ^^)
* Il s’apprend en 5 minutes tant sa syntaxe est courte à connaitre
* Il est moins verbeux, donc plus léger que le XML tout en restant lisible pour l’être humain
* Il permet de transmettre tout types de données (tableau, chaine, entier, objet …)
* Étant donné qu’il est quasi universel, il est très simple de dialoguer d’un langage à un autre via JSON (PHP vers Javascript est un exemple courant)
Voyons un peu la syntaxe …
La syntaxe de base
{ = Définis que le contenu englobé est un objet
ex : {objet json}
: = Définis une valeur
ex : {age:25}
“ ou ‘ = Définis que la la valeur est textuelle (on ne les mettra pas pour les valeurs numérique)
ex : {name:”Idleman”}
, = sépare un attribut d’un autre
ex : {name=”Idleman”,age:25}
[ = définis que le contenu englobé est un tableau
ex : {name=”Idleman”,age:25,hobby:[“informatique”,”musique”,”sport”,”sorties”]}
C’est tout pour la syntaxe! Il est maintenant possible de faire des combinaisons en englobant des objet dans d’autres
ex : {users:[{“name”:”Idleman”,”age”:25},{“name”:”IdleGirl”,”age”:20}]}
Il est possible d’imbriquer des objets ou des tableaux en tant que valeurs d’autres objets, tableau ou attributs à l’infini.
Le JSON en Javascript
Comme nous l’avons spécifié, le javascript est le langage “natif” du JSON, une chaine JSON est tout simplement construite de la même façon qu’un objet javascript.
ex : var bdd = {users:[{“name”:”Idleman”,”age”:25},{“name”:”IdleGirl”,”age”:20}]};
Vas créer un objet javascript contenants plusieurs utilisateurs et accessible de cette façon
<script type="text/javascript">
var bdd = {users:[{"name":"Idleman",age:25},{"name":"IdleGirl","age":20}]};
alert(bdd.users[0].name); // retournera "Idleman"
alert(bdd.users[1].age); // retournera "20"
</script>
Le JSON en PHP
Le JSON étant une chaine de texte, il est géré de la même façon partout, cependant certains langages comme PHP mettent a disposition des outils pour nous simplifier encore la vie dans la construction de la chaine.
Aussi PHP propose t’il depuis la V5.1 (si ma mémoire est bonne, à vérifier) les fonction json_encode() et json_decode() qui permettent de traduire un tableau ou un objet php directement en chaine JSON et réciproquement.
ex :
<?php
$bdd = array();
$bdd['users'][0]['name'] = 'IdleMan' ;
$bdd['users'][0]['age'] = 25 ;
$bdd['users'][1]['name'] = 'IdleGirl' ;
$bdd['users'][1]['age'] = 20 ;
//Vas retourner "{users:[{"name":"Idleman","age":25},{"name":"IdleGirl",age:20}]}"
echo json_encode($bdd);
$newBdd = json_decode("{"users":[{"name":"Idleman","age":25},{"name":"IdleGirl","age":20}]}");
//Vas retourner la structure du tableau newBdd avec nos utilisateurs
var_dump($newBdd);
?>
Le JSON dans les autres langages
Chaque langages gère nativement ou non le JSON, pour la plupart il existe des librairies toutes faites (C#, Python, Java, C++ …)
pour d’autre c’est géré en natif (javascript, PHP …) au final très peu de langages ne vous proposeront rien du tout, et pour ceux la,
il vous faudra construire vos chaines JSON à la main.
Exemple utile utilisant JSON, PHP, Javascript, et de l’AJAX(JQuery)
Histoire de comprendre l’intérêt de JSON dans vos sites web, voila un petit exemple de récupération des utilisateurs dans une base de données.
Javascript vas appeler une page PHP via Ajax, PHP vas retourner une chaine JSON contenant tous les utilisateurs de la base, enfin Javascript vas récupérer
cette chaine et afficher les utilisateurs sur la page.
La page PHP “users.php”
<?php
// On considère que ces informations viennent d'une base de données
$bdd = array();
$bdd['users'][0]['name'] = 'IdleMan' ;
$bdd['users'][0]['age'] = 25 ;
$bdd['users'][1]['name'] = 'IdleGirl' ;
$bdd['users'][1]['age'] = 20 ;
//On renvoie la chaine JSON contenant toutes les infos
echo '('.json_encode($bdd).')';
?>
La Page HTML/JAVASCRIPT
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Mes utilisateurs</title>
</head>
<body>
<button onclick="loadusers();">Charger les utilisateurs</button>
<ul id="userContainer"></ul>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
function loadusers(){
$.ajax({
url: "users.php",
type:"GET",
success: function(response) {
var bdd = eval(response);
for(i=0;i<bdd.users.length;i++){
var user = bdd.users[i];
$('#userContainer').append('<li><b>Nom:</b>'+user.name+' <b>Age:</b>'+user.age+'</li>');
}
}
});
}
</script>
</body>
</html>
Pour les flemmards du copier/coller, les sources sont téléchargeable ici.
Plus d’infos sur www.json.org🙂
” ou ‘ = Définis que la la valeur est numérique
ex : {name:”Idleman”}
Tu voulais pas plutôt dire “textuel” ? 😛
Arf, faut définitivement que j’arrête la ganja, (ou alors que je me relise une fois de temps en temps ^^) merci beaucoup je corrige ça
Note: la syntaxe ‘toto’ pour les chaînes de caractères est valide en JS mais pas en JSON. Donc
{ 'foo' : 'bar' }n’est pas valide en JSON, tout comme
{ foo : "bar" }vu que les clefs sous forme de chaînes de caractères doivent obligatoirement être entourés de guillemets.
Merci pour la précision :), je l’ignorais, les formes indiquées ayant toujours fonctionné quel que soit le langage impliqué chez moi (je suppose que la plupart supportent cette erreur de notation)
Excellent résumé: en effet, pourquoi se peler les rouleaux à utiliser xml ou un système de stockage perso ^^
Merci !
Merci pour ce petit tutoriel, j’avais un peu de mal à voir l’intérêt du JSON jusqu’à maintenant.
Et pire, je le prononçais “jissone” ! 😀
Tu as menti sur l’age d’idlegirl 😉
Ha ha ha, et comment tu sais que le code ne ment pas ? Ou pire, que c’est toujours la même qu’à l’époque ? Niark niark niark (je suis maléfique) ! Tu vas bien Arnaud ? Je savais pas que tu passait de temps à autres ici :D, vas falloir que je surveille mon langage :p
C’est sensé être ta chérie, idlegirl ?
Pourquoi cette question? 🙂
Parce que je suis curieux, tout simplement 🙂
Yep c’est elle (bien que je ne suis pas sûr qu’elle approuve le pseudo toute non geek qu’elle est mais bon ^^):)
[troll]Web Of Trust ont pompé leur logo sur celui de JSON ou c’est le contraire ?[/troll]
ah oui j’avais jamais vu XD !! Historiquement JSON est apparus en premier, après j’ignore ce qu’il en est de l’ancienneté de leurs logo ^^
En bon English, le J se prononce Djey [dʒeɪ] et pas Dji [dʒiː]. On dit un DeeJay et pas un DeeDji !
Bonsoir et merci pour ces explications “Idleman”.
🙂