FreeDatas2HTML/public/withJSON.html

63 lines
5.1 KiB
HTML
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Exemple d'utilisation de FreeDatas2HTML pour parser et afficher des données JSON dans une page web.">
<meta name="robots" content="index, follow">
<link rel="stylesheet" href="CSS/paper.min.css">
<link rel="stylesheet" href="CSS/fd2html.css">
<script src="JS/exampleWithJSON.app.js" defer></script>
<script src="JS/matomo.js" defer></script>
<title>Parser, afficher, paginer, filtrer... des données JSON en TypeScript/JavaScript</title>
</head>
<body class="paper container">
<header id="header" class="text-center">
<h1><a href="/">FreeDatas2HTML</a></h1>
<nav id="menu-principal">
<ul class="inline row flex-center">
<li><a href="./#intro" class="badge warning sm-12 col">Introduction</a></li>
<li><a href="./examples.html#content" class="badge success sm-12 col">Exemples</a></li>
<li><a href="https://forge.chapril.org/Fab_Blab/FreeDatas2HTML" target="_blank" title="accéder au dépôt GIT" rel="noopener" class="badge success sm-12 col">Git</a></li>
</ul>
</nav>
</header>
<h2>Parser et afficher des données JSON</h2>
<div class="row">
<div id="filtre1" class="sm-12 md-6 lg-6 col"></div>
<div id="search" class="sm-12 md-6 lg-6 col"></div>
<div id="paginationOptions" class="sm-12 md-12 lg-12 col"></div>
</div>
<h3>Nombre total de résultats : <span id="compteur"></span></h3>
<div id="datas">
<p>Si tout se passe bien, ce texte sera remplacé par un tableau de données extraites du fichier JSON.</p>
</div>
<div id="pages"></div>
<article id="content">
<p>Le <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/JSON" title="Présentation du JSON sur MDN">format JSON</a> est un des plus utilisés pour échanger des données entre applications, surtout lorsquil sagit de <strong>«consommer» une API</strong>. Souvent, il est nécessaire de sidentifier pour accéder aux données tierces. FreeDatas2HTML permet de le faire en ajoutant des en-têtes aux requêtes distantes.</p>
<p>Pour pouvoir être correctement parsée, votre chaîne JSON peut avoir deux formats différents:</p>
<ul>
<li>soit un tableau dobjets JavaScript, dont chaque objet est susceptible davoir des attributs différents. À partir du moment où un attribut y sera trouvé une fois, il sera considéré comme un champ pour vos données, même sil ne concerne quun enregistrement. <a href="/datas/posts.json" title="fichier de données" target="_blank" rel="nofollow">Voir le fichier utilisé pour lexemple de cette page</a>.</li>
<li>soit deux tableaux distincts: «fields» et «datas», listant respectivement les noms des champs et les enregistrements. Dans ce cas, toute donnée surnuméraire par rapport au nombre de champs pour un enregistrement sera ignorée. Cette seconde solution se rapproche de la structure des fichiers CSV et est sans doute à préférer si vous avez la main sur la construction de la chaîne JSON. <a href="/datas/posts2.json" title="fichier de données" target="_blank" rel="nofollow">Voir léquivalent du fichier précédent, structuré de cette façon</a>.</li>
</ul>
<p>Dans les deux cas, les données parsées doivent être de type <b>string</b>, <b>number</b> ou <b>boolean</b>, sans quoi elles seront ignorées.</p>
<p>Pour le reste, le fonctionnement de lexemple ci-dessus est similaire à celui <a href="./withCSV.html">parsant du CSV</a>. Ici, il ny a quune liste «userId» proposée pour filtrer les données. Le moteur de recherche permet de filtrer les données des champs «title» et «body» — histoire de vous faire réviser votre latin :-) — et de montrer que le moteur de recherche de FreeDatas2HTML nutilise pas forcément tous les champs existants.</p>
</article>
<aside>
<p>Les données JSON affichées sur cette page ont été recopiées de l<a href="https://jsonplaceholder.typicode.com/" target="_blank" rel="noopener">API de test {JSON} Placeholder</a> pour éviter les appels distants inutiles, mais elles pourraient très bien être récupérées à chaque nouvel affichage de la page.</p>
</aside>
<aside>
<p><a href="https://forge.chapril.org/Fab_Blab/freeDatas2HTML/src/branch/master/src/demo/exampleWithJSON.ts" target="_blank" title="accéder au code" rel="noopener" class="paper-btn btn-secondary">Code source utilisé par cette page.</a></p>
</aside>
<footer><p>Design : <a href="https://www.getpapercss.com" target="_blank">PaperCSS</a> | <a href="/mentions-legales.html">Contact et mentions légales</a>.</p></footer>
</body>
</html>