Cette action fait partie du groupe d'actions gérant l'affichage de données JSON, XML ou CSV issues d'un fichier sur le serveur ou récupérées avec l'API d'un site web. Un mécanisme de cache permet de limiter les interrogations du serveur distant. Très pratique pour les sites avec une formule gratuite limitée en nombre d'appels.

  • data2list : sous forme d'une liste arborescente
  • data2table : dans un tableau HTML
  • data-info : selon votre modèle de mise en page

Ces actions utilisent les mêmes principes et options que vous pouvez décoouvrir à l'aide des boutons bleus ci-dessous.

🆙 data2list : Affiche le contenu d'un fichier JSON, XML ou CSV sous forme d'une liste *

Cliquer pour lire la documentation

syntaxe {up data2list=data_source}
@version: UP-3.0 @author: lomart @license: GNU/GPLv3 @tags: Expert

    emplacement et type des données

    • data2list: URL vers data ou fichier
    • datatype: pour forcer la détection du type de données (json, xml, csv)
    • encoding: codage des caractères de la source. ex: ISO-8859-1

    uniquement pour des données CSV ou XML

    • csv-header = 1: 1 si la première ligne contient les titres des colonnes.
    • csv-header-title: titres des colonnes séparées par csv-separator. Si défini, remplace les titres du fichier
    • csv-separator = ;: caractère séparateur pour les colonnes
    • xml-attributes: les champs dans la balise ouvrante sont dans un sous-tableau @attributes, Non par défaut

    sélection des lignes

    • lign-root: chemin vers la ligne racine. Exemple: trk/trkseg
    • lign-select: indice(s) de(s) ligne(s) de données ou col1:val1;ou val2, colN:valN pour recherche contenu

    sélection des colonnes/champs

    • col-include: liste des champs retournés (séparateur virgule)
    • col-exclude: liste des champs non retournés (séparateur virgule)

    template pour mise en forme

    • template = ##LABEL##: ##VALUE##: modèle pour une ligne
    • array-subtitle: contenu du premier niveau de la liste. vide=indice

    mise en forme du contenu

    • col-class: classes pour les champs (champ1:class1 class2,champ2:class)
    • col-label: correspondance entre nom du champ et titre colonne (champ1:col1,champ2:col2, ...)

    type des contenus

    • col-type: date, url, image, boolean, string ou format pour fonction php: sprintf
    • date-format = %e %B %Y: format pour les dates
    • boolean-in = 1,0: valeurs dans fichier pour true,false,null
    • boolean-out = lang[fr=oui,non,-;en=yes,no,n.a.]: texte en sortie pour les valeurs true,false,null
    • url-target = _blank: Cible pour ouverture URL
    • image-path: chemin vers une image dans les données
    • image-max-size: coté du carré dans lequel elle sera inscrite. Exemple: 100px

    si un champ est vide

    • col-empty: contenu d'un champ si vide u égal à zéro. ex: colname:none, ...
    • col-empty-invisible: 1 = ne pas afficher les labels des champs avec valeur vide

    habillage du bloc retourné

    • id:
    • class: classe(s) pour bloc
    • style: style inline pour bloc
    • css-head (base-css): style ajouté dans le HEAD de la page

    Gestion du cache interne

    • cache-delay = 30: durée du cache en minutes. 0 pas de cache

    Un exemple simple

    Nous voulons afficher les données des villes partageant le même code postal en utilisant les données fournies le site geo.api.gouv.fr

    Le shortcode

    {up data2list=https://geo.api.gouv.fr/communes?codePostal=13600}

    L'option principale du shortcode est l'url vers les données. Voir la documentation sur geo.api.gouv.fr/decoupage-administratif/communes

    Le contenu du fichier distant

    Le résultat

    • 0
      • nom: Ceyreste
      • code: 13023
      • codeDepartement: 13
      • siren: 211300231
      • codeEpci: 200054807
      • codeRegion: 93
      • codesPostaux
        • 0: 13600
      • population: 4729
    • 1
      • nom: La Ciotat
      • code: 13028
      • codeDepartement: 13
      • siren: 211300280
      • codeEpci: 200054807
      • codeRegion: 93
      • codesPostaux
        • 0: 13600
      • population: 35993

    data2list, contrairement à data-info et data2table, affichera toujours toutes les données quelle que soit la structure interne du fichier source.
    Utilisez cet avantage pour vérifier et analyser l'organisation de la source de données.
    Vous pouvez aussi vérifier les données avec ces 3 sites : CSV, JSON et  XML

    Améliorer la présentation

    Le principal reproche que l'on peut faire au résultat précédent est la présence des indices des tableaux que l'on voit aussi dans la source de données.

    Pour éviter cela, l'action data2list propose 2 options : col-type et array-subtitle.
    Voyons-les en action avec ce shortcode.

    {up treeview}
      {up data2list=images/actions-demo/data/communes-01460.json
       | array-subtitle=root:[b]##nom##[/b] (##codesPostaux/0##)
       | col-type=codesPostaux:compact, population:##num## hab., siren:mask ###-###-###
       | col-empty=population:[span class="t-red"]aucun habitant[/span]
      }
    {/up treeview}

    J'ai inclus le shortcode dans une action treeview. Cette présentation plus compacte permet d'utiliser une autre commune avec plus de résultats.
    Cliquez sur Nantua pour voir le résultat


    • Brion (01460)
      • nom: Brion
      • code: 01063
      • codeDepartement: 01
      • siren: 210-100-632
      • codeEpci: 200042935
      • codeRegion: 84
      • codesPostaux: 01460
      • population: aucun habitant
    • Béard-Géovreissiat (01460)
      • nom: Béard-Géovreissiat
      • code: 01170
      • codeDepartement: 01
      • siren: 210-101-705
      • codeEpci: 200042935
      • codeRegion: 84
      • codesPostaux: 01460
      • population: 1 053 hab.
    • Montréal-la-Cluse (01460)
      • nom: Montréal-la-Cluse
      • code: 01265
      • codeDepartement: 01
      • siren: 210-102-653
      • codeEpci: 200042935
      • codeRegion: 84
      • codesPostaux: 01460
      • population: 3 456 hab.
    • Nurieux-Volognat (01460)
      • nom: Nurieux-Volognat
      • code: 01267
      • codeDepartement: 01
      • siren: 210-102-679
      • codeEpci: 200042935
      • codeRegion: 84
      • codesPostaux: 01460
      • population: 1 025 hab.
    • Nantua (01130)
      • nom: Nantua
      • code: 01269
      • codeDepartement: 01
      • siren: 210-102-695
      • codeEpci: 200042935
      • codeRegion: 84
      • codesPostaux: 01130, 01460
      • population: 3 454 hab.
    • Port (01460)
      • nom: Port
      • code: 01307
      • codeDepartement: 01
      • siren: 210-103-073
      • codeEpci: 200042935
      • codeRegion: 84
      • codesPostaux: 01460
      • population: 836 hab.

    • l'option array-subtitle substitue l'indice du tableau par le contenu du champ nom et de la première valeur de codesPostaux.
      L'argument est composé du mot "root" pour indiquer que la règle s'applique à la racine du tableau, suivi d'un double-point, puis d'un modèle décrivant le contenu attendu au format bbcode.
      On indique le nom des champs entre 2 double dièses selon la méthode habituelle avec UP.
      Si la valeur désirée n'est pas un enfant direct, on indique le chemin en séparant les champs par des slash (voir codesPostaux). 
      Cette option accepte plusieurs règles en les séparant par des virgules. Pour les sous-tableaux dont les éléments sont des sous-tableaux, on utilise le nom du champ parent à la place de root.
    • l'option col-type spécifie le traitement à apporter au contenu du champ.
      Dans notre exemple, nous voulons que le tableau interne de codesPostaux soit converti en chaîne et que la valeur du champ population soit exprimée avec un espace tous les milliers, puis suivie du mot 'hab.'.  Pour siren, le mot-clé mask introduit le modèle de présentation. Plus d'informations sur les options des 3 actions data
    • l'option col-empty indique le texte à utiliser si la valeur est zéro ou vide pour le champ "population". La démo utilise une version modifiée des données avec une population à zéro pour "Brion".

    Sélectionner les données

    Il est possible de limiter les données à la ville de Nantua OU de Montréal-la-Cluse en les spécifiant dans une option select.
    Juste pour montrer l'usage du ET, il faut également que ces 2 villes soient dans la région 84.

    l'option col-exclude permet de ne pas afficher certains champs et col-label permet de renommer les champs.

    {up data2list=https://geo.api.gouv.fr/communes?codePostal=01460
    | lign-select=nom:NANTUA; Montréal-la-Cluse , codeRegion:84
    | col-exclude=codeDepartement, codeEpci
    | col-label=code:code INSEE, codesPostaux:CP
    | array-subtitle=root:[b]##nom##[/b] (##codesPostaux/0##)
    | fields-type=codesPostaux:compact, population:##num## hab.}
    • Montréal-la-Cluse (01460)
      • nom: Montréal-la-Cluse
      • code INSEE: 01265
      • siren: 210102653
      • codeRegion: 84
      • CP: 01460
      • population: 3 456 hab.
    • Nantua (01130)
      • nom: Nantua
      • code INSEE: 01269
      • siren: 210102695
      • codeRegion: 84
      • CP: 01130, 01460
      • population: 3 454 hab.

    Une variante pour montrer la sélection par l'indice des lignes (la première et la dernière) et l'usage de l'option col-include.

    {up data2list=https://geo.api.gouv.fr/communes?codePostal=01460
    | lign-select=1,-1
    | col-include=population
    | array-subtitle=root:[b]##nom##[/b] (##codesPostaux/0##)
    | fields-type=population:%s hab.}
    • Brion (01460)
      • population:
    • Port (01460)
      • population: 836 hab.
    Pour info, cette page utilise 20 action(s) :
    upactionslist (1) flexauto (5) modal (3) icon (2) data2list (4) div (1) treeview (1) jcontent-info (1) tabslide (1) toc (1)