Dojo JBJ

Json By Json par l'exemple

11 mars 2016

Matthias Dieudonné
François Parmentier

Pré-requis: JSON

JSON (JavaScript Object Notation) est un format structuré équivalent à XML

Pourquoi JSON ?

Javascript
+ Léger

Comment ça marche ?

Ce sont des clés auxquelles on associe une valeur par ":"

{"CLÉ" : VALEUR}

Les couples clé/valeur sont séparés par une virgule :

{"CLÉ X" : VALEUR X,"CLÉ Y" : VALEUR Y}

Possibilités de valeurs :

{"Du texte" : "blablabla",
"Un nombre" : 42,
"Un booléen" : true,
"Valeur null" : ~~null~~,
"Un tableau" : ["blabla" , 45],
"Un objet" : {...}}

Exemple


  
    Exemple
    
      imbrication
      tableaux


{
  "doc": {
    "title": "Exemple",
    "ul": [
      "imbrication",
      "tableaux"
    ]
  }
}

Parallèle / XSLT

XSLT: XML -> transformé

JBJ: JSON -> transformé

JBJ

Historique

Point commun : castor-core (fin janvier 2015)

https://github.com/Inist-CNRS/node-jbj (v4.1)

JBJ

Modes d'utilisation

module npm (programmation)
commande CLI: jbj
PlayGround

JBJ

Principe

Transformer un Objet JavaScript (JSON) en un autre Objet JavaScript, via une feuille de style écrite en JSON

JBJ

Entrées-sorties

Chaque action transforme l'objet en entrée en l'objet d'entrée de l'action suivante

JBJ

Modules


$ echo '{ "resolveDOI": true }' > ./resolveDOI.jbj
$ echo '"10.1134/S1607672911010121"' > DOI.json
$ jbj -u ist ./resolveDOI.jbj DOI.json
{ 'doi-publication-title':
   [ 'Dokl Biochem Biophys',
     'Doklady Biochemistry and Biophysics' ],
  'doi-publication-date-year': 2011,
  'doi-publisher': 'Pleiades Publishing Ltd',
  'doi-type': 'journal-article',
  'doi-ISSN': [ '1607-6729', '1608-3091' ],
  'doi-subject': [ 'Biophysics', 'Biochemistry', 'Chemistry(all)' ],
  'doi-DOI': '10.1134/s1607672911010121' }

Déroulement

Le pilote a fui, vous êtes tous passagers

... l'avion s'écrase

Il nous faut :

Un pilote
Un co-pilote

Votre but : Redresser l'avion

Comment ?

En réalisant une série d'exercices avant le crash...

10 minutes par équipage

Découvrons le tableau de bord

Récupérer la valeur d'un champ

Avec l'input numéro 1, récupérer l'age.

Astuce : get

Pour voir la solution, flèche vers le bas

Solution


{
  "get": "age"
}

Récuperer plusieurs champs

Avec l'input, récupérer à la fois l'age et le name.

Astuce : avec get aussi, mais avec un tableau en paramètres

Pour voir la solution, flèche vers le bas

Solution


{
  "get": ["age", "name"]
}

Concaténer deux champs

Avec l'input, concaténer les deux champs name et age, dans cet ordre.

Notez que l'ordre des champs est modifié par rapport à l'input.

Astuce : join

Pour voir la solution, flèche vers le bas

Solution


{
  "get": ["name", "age"],
  "join": ", "
}

Faire une phrase avec plusieurs champs

Avec l'input,faire une phrase qui dit que la personne name a age années.

Astuce : template
Astuce 2 : activer template en cliquant sur le bouton

Pour voir la solution, flèche vers le bas

Solution


{
  "template": "{{name}} est un {{job}} de {{age}} ans."
}

Récupérer le premier projet de Yannick

Récupérer le name du premier projet.

Astuce : select

Pour voir la solution, flèche vers le bas

Solution


{
  "select": ".projects :first-child .name"
}

Récupérer le dernier projet de Yannick

Récupérer le name du dernier projet.

Astuce : select, sélecteur CSS3

Pour voir la solution, flèche vers le bas

Solution


{
  "select": ".projects :last-child .name"
}

Sélection complexe

Récupérer le name des projets qui ont un label.

Pour voir la solution, flèche vers le bas

Solution


{
  "select": ".projects .label ~ .name"
}

Tri simple

Récupérer les name des projets dans un tableau.

Astuce : select plus simplement qu'avant

Pour voir la solution, flèche vers le bas

Solution


{
  "select": ".projects .name"
}

Tri simple

Puis, trier le tableau obtenu.

Astuce : sort
Astuce : quand une action (comme sort) ne prend pas de paramètre, on lui donne par convention true, mais toute autre valeur fonctionnerait aussi

Pour voir la solution, flèche vers le bas

Solution


{
  "select": ".projects .name",
  "sort": true
}

Tri sur des objets

Récupérer la liste des projets dans un tableau d'objets.

Astuce : select très simple
Astuce : select renvoie systématiquement un tableau, et comme projects est un tableau, on a un tableau de tableaux. Pour supprimer un niveau, récupérer le premier (et seul) élément de ce tableau, en utilisant "get": 0

Pour voir la solution, flèche vers le bas

Solution


{
  "select": ".projects",
  "get": 0
}

Tri sur des objets

Puis, trier les projets selon leur name.

Astuce : sortBy

Pour voir la solution, flèche vers le bas

Solution


{
  "select": ".projects",
  "get": 0,
  "sortBy": "name"
}

Opérations sur un tableau

Récupérer le tableau des name de chaque projet, et capitaliser chacun d'entre eux.

Astuce : capitalize
Astuce : foreach
Note : chaque itération à l'intérieur de foreach travaille avec un élément du tableau d'origine comme input

Pour voir la solution, flèche vers le bas

Solution


{
  "select": ".projects .name",
  "foreach": {
    "capitalize": true
  }
}

Remplacer l'input

Remplacer tout l'input par la chaîne de caractères nouveau.

Astuce : set

Pour voir la solution, flèche vers le bas

Solution


{
  "set": "nouveau"
}

Ajouter un champ

Ajouter un champ à input, dont le nom est dirty, et le contenu Rrogntudjû (avec les espaces en début et fin)

Astuce : $, ajouter une variable
Astuce : set, car on affecte du JBJ à une variable

Pour voir la solution, flèche vers le bas

Solution


{
  "$dirty": { "set" : " Rrogntudjû " }
}

Nettoyer un champ

Ajouter un champ à input, dont le nom est clean, et qui prend la valeur du champ dirty auquel on enlève les espaces au début et à la fin.

Astuce : n'oubliez pas get (et dirty non plus)
Astuce : trim

Pour voir la solution, flèche vers le bas

Solution


{
  "$dirty": { "set": " Rrogntudjû " },
  "get": "dirty",
  "trim": true
}

Remplacer du texte

À la suite de la solution de l'exercice précédent, remplacer Rrogn par Nom .

Astuce : replace avec deux paramètres

Pour voir la solution, flèche vers le bas

Solution


{
  "$dirty": { "set": " Rrogntudjû " },
  "get": "dirty",
  "trim": true,
  "replace": ["Rrogn","Nom "]
}

Répéter une action

À la suite encore, remplacer tudjû par de Dieu (si si!).

Astuce : replace, évidemment!
Astuce : numéroter l'action par #2

Pour voir la solution, flèche vers le bas

Solution


{
  "$dirty": { "set": " Rrogntudjû " },
  "get": "dirty",
  "trim": true,
  "replace": ["Rrogn","Nom "],
  "replace#2": ["tudjû","de Dieu"]
}

Verbaliser un tableau de codes

Récupérer la liste des name des projects (voir un des exercices précédents), puis remplacer ezpaarse par ezPAARSE, castor-load par Castor-LOAD, termith par Termith, et ezmesure par ezMESURE.

Astuce : mapping
Astuce : activer le module array dans lequel se trouve mapping, en cliquant sur le bouton

Pour voir la solution, flèche vers le bas

Solution


{
  "select": ".projects .name",
  "mapping": {
    "ezpaarse": "ezPAARSE",
    "castor-load": "Castor-LOAD",
    "termith": "Termith",
    "ezmesure": "ezMESURE"
  }
}

Cerise sur le gâteau

d'anniversaire?

Calculer l'âge du collègue abder.

Astuce : compute
Astuce : get accepte les notations pointées: colleagues.abder.birth
Astuce : this contient l'input (dans compute)
Astuce : nous sommes en 2016 :P
Astuce : compute fait partie du module template

Pour voir la solution, flèche vers le bas

Solution


{
  "get": "colleagues.abder.birth",
  "compute": "2016 - this"
}

Solution alternative


{
  "get": "colleagues.abder",
  "compute": "2016 - birth"
}

Série d'âges

Calculer l'âge des collègues de Yannick.

Astuce : compute
Astuce : foreach
Astuce : select

Pour voir la solution, flèche vers le bas

Solution


{
  "select": ".birth",
  "foreach": {
    "compute": "2016 - this"
  }
}

Solution


{
  "select": ".colleagues",
  "get": 0,
  "foreach": {
    "compute": "2016 - birth"
  }
}