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

JBJ

Principe

JBJ

Entrées-sorties

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

un avion incontrolable

Le pilote a fui, vous êtes tous passagers

... l'avion s'écrase

besoins

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.

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"
  }
}