63 lines
5.1 KiB
HTML
63 lines
5.1 KiB
HTML
<!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 lorsqu’il s’agit de <strong>« consommer » une API</strong>. Souvent, il est nécessaire de s’identifier 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 d’objets JavaScript, dont chaque objet est susceptible d’avoir 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 s’il ne concerne qu’un enregistrement. <a href="/datas/posts.json" title="fichier de données" target="_blank" rel="nofollow">Voir le fichier utilisé pour l’exemple 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 l’exemple ci-dessus est similaire à celui <a href="./withCSV.html">parsant du CSV</a>. Ici, il n’y a qu’une 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 n’utilise 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> |