<metaname="description"content="Présentation de FreeDatas2HTML, module TypeScript permettant de parser, afficher, filtrer... des données, côté client.">
<metaname="robots"content="index,follow">
<linkrel="stylesheet"href="CSS/paper.min.css">
<linkrel="stylesheet"href="CSS/fd2html.css">
<scriptsrc="JS/matomo.js"defer></script><!-- Outil statistique pour le site de démonstration. À ne pas garder lors d'une réutilisation :-) -->
<title>FreeDatas2HTML : parser et afficher des données en TypeScript/JavaScript</title>
</head>
<bodyclass="paper container">
<h1>FreeDatas2HTML</h1>
<h2>Parser, afficher, paginer, filtrer, classer des données… à l’aide de TypeScript/JavaScript</h2>
<p>FreeDatas2HTML vous permet de <strong>parser des données</strong> listées dans une page internet ou encore une ressource distante. Les formats de données possibles sont le <ahref="/withJSON.html"title="Page d'exemple">JSON</a>, le <ahref="/withCSV.html"title="Page d'exemple">CSV</a> ou encore le <ahref="/withHTML.html"title="Page d'exemple">HTML</a>, pour peu que les données y soient listées de manière rigoureuse.</p>
<p><ahref="/userFile.html"title="Page de test"class="paper-btn btn-success">Testez ici avec votre propre fichier CSV.</a></p>
<p>Le parseur retourne de manière distincte une liste des champs trouvés, une liste des «enregistrements», ainsi que les éventuelles anomalies rencontrées durant le traitement. Vous pouvez <strong>utiliser votre propre parseur</strong>, par exemple pour gérer d’autres formats de données (XML…).</p>
<p>Une fois les données parsées, <strong>tous les traitements se font côté client</strong>, sans nouvel appel nécessaire à l’éventuelle source de données distante.</p>
<p>FreeDatas2HTML vous permet d’afficher les données dans votre page web, par défaut <strong>sous forme de tableau</strong>. Mais il est possible de paramèter d’autres formats, par exemple <strong>une liste HTML</strong> ou encore d’utiliser son propre moteur de rendu, tout en bénéficiant du reste du code de FreeDatas2HTML.</p>
<p>Vous pouvez choisir de ne <strong>pas afficher tous les champs trouvés</strong> par le parseur, tout en les gardant disponibles pour les filtres. En option, un <strong>compteur d’enregistrements</strong> peut être affiché.</p>
<p>Par défaut, <strong>le classement se fait de manière alphabétique et «naturelle»</strong>, c’est-à-dire qu’en ordre ascendant «20» sera devant «100», malgré le fait que «1» se trouve devant «2»…</p>
<p>Mais il est possible de <strong>fournir des fonctions spécifiques de classement</strong> pour certains champs, pour peu qu’elles soient compatibles avec <ahref="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/sort"target="_blank"title="Voir sur MDN (Mozilla)"rel="noopener">la fonction sort() de JavaScript</a>.</p>
<p>Il peut être proposé à l’utilisateur de filtrer les données, via des listes <SELECT> reprenant les valeurs distinctes d’un champ, classées de la même manière que vu précédemment.</p>
<p>Si plusieurs filtres sont ainsi proposés, leurs actions s’additionnent, c’est-à-dire que <strong>seuls les enregistrements validant tous les filtres sélectionnés seront fournis en résultat</strong>.</p>
<p>Vous pouvez écrire vos propres scripts pour <strong>remplacer n’importe quelle classe du projet</strong>, pour peu qu’il respecte son interface. Cela peut être assez simple, en vous inspirant de l’existant.</p>
<p>FreeDatas2HTML est partagé <ahref="https://forge.chapril.org/Fab_Blab/freeDatas2HTML/src/branch/master/LICENSE"target="_blank"title="Lire la licence"rel="noopener">sous licence AGPL</a>, ce qui vous donne le droit de modifier et partager son code, mais en gardant les mêmes droits (copyleft).</p>
<p>N’hésitez pas à me contacter pour me signaler un bug ou me demander de l’aide pour une intégration. Pas forcément gratuitement, dans le deuxième cas :-)</p>
<p>FreeDatas2HTML est écrit en <ahref="https://www.typescriptlang.org/"target="_blank"title="Site du projet (en)"rel="noopener">TypeScript</a>, les tests étant réalisés via <ahref="https://karma-runner.github.io/latest/index.html"title="Site du projet (en)"target="_blank"rel="noopener">Karma</a> et <ahref="https://jasmine.github.io/"target="_blank"title="Site du projet (en)"rel="noopener">Jasmine</a> dans environnement Node/Webpack. Deux modules externes sont utilisés : <ahref="https://www.papaparse.com"rel="noopener"target="_blank"title="Site du projet (en)">Papa Parse</a> pour parser les données CSV et <ahref="https://www.npmjs.com/package/natural-orderby"rel="noopener"target="_blank"title="Page du projet sur NPM (en)">natural-orderby</a> pour optimiser le classement par défaut des données.</p>
<p><ahref="https://forge.chapril.org/Fab_Blab/freeDatas2HTML"target="_blank"title="accéder au dépôt GIT"rel="noopener"class="paper-btn btn-secondary">Accéder au dépôt GIT du projet.</a></p>
