Gestionnaire JSON

Gérer des jeux de données et applique des correctifs JSON.

Appliquer des correctifs

Exemple 1

Il y a un nombre inconnu de produits à un tarif unitaire de (N/D).

Mon premier produit est (inconnu) et le produit original était (inconnu).

Correctif pour un tableau d'objets:

Code source

HTML

<div data-wb-jsonmanager='{
		"url": "demo/data-fr.json",
		"name": "exemple1",
		"patches": [
			{ "op": "wb-count", "path": "/produits", "set": "/nbproduit" },
			{ "op": "copy", "from": "/produits/0", "path": "/produit"},
			{ "op": "wb-nbtolocal", "path": "/prix", "suffix": "$" }
		]
	}'></div>
<p>Il y a <span data-json-replace="#[exemple1]/nbproduit">un nombre inconnu de</span> produits à un tarif unitaire de <span data-json-replace="#[exemple1]/prix">(N/D)</span>.</p>
<p>Mon premier produit est <span data-json-replace="#[exemple1]/produit">(inconnu)</span> et le produit original était <span data-json-replace="demo/data-fr.json#/produit">(inconnu)</span>.</p>

<div data-wb-jsonmanager='{
		"url": "demo/data-fr.json#/niveau1/niveau2",
		"name": "exemple2",
		"patches": [
			{ "op": "wb-toDateISO", "path": "/itm1" }
		]
	}'>
	<p>Correctif pour un tableau d'objets:</p>
	<ul data-wb-json='{
			"url": "#[exemple2]",
			"mapping": [
				{ "selector": "li", "value": "/itm1" }
			]
		}'>
		<template>
			<li></li>
		</template>
	</ul>
</div>

Fichier demo/data-fr.json

{
	"produit": "Bonjour le monde",
	"produits": [
		"Mon nouveau produit",
		"Mon deuxième produit",
		"Mon produit numéro 3",
		"Mon produit numéro 4"
	],
	"niveau1": {
		"niveau2": [
			{
				"itm1": "2016-11-30T07:53:56Z"
			},
			{
				"itm1": "2017-02-01T16:52:00Z"
			},
			{
				"itm1": "2013-09-08T14:14:14Z"
			}
		]
	},
	"prix": 1234.98
}

Exemple 2

Cet exemple exploite les correctifs suivants : patches, wb-swap et wb-toDateISO.

Code source

HTML

<div data-wb-jsonmanager='{
	"name": "swapEx",
	"url": [ "demo/events.json#/data/eventList", "demo/events-i18n.json" ],
	"patches": [
		{ "op": "patches", "path": "/items", "patches": [
			{ "op": "wb-swap", "path": "/eventLanguage", "ref": "/reference/language/fr" },
			{ "op": "wb-swap", "path": "/province", "ref": "/reference/province/fr" },
			{ "op": "wb-swap", "path": "/registrationStatus", "ref": "/reference/registrationStatus/fr" },
			{ "op": "wb-toDateISO", "path": "/startDate" },
			{ "op": "wb-toDateISO", "path": "/endDate" },
			{ "op": "patches", "path": "/registeredPeople", "patches": [
				{ "op": "wb-swap", "path": "/prefLang", "ref": "/reference/language/fr" }
			] }
		] }
	]
}'>
	<div data-wb-json='{
		"url": "#[swapEx]/items",
		"mapping": [
			{ "selector": "h4", "value": "/frtitle" },
			{ "selector": ".event-description", "value": "/frdescription/html", "isHTML": "true" },
			{ "selector": ".event-language", "value": "/eventLanguage" },
			{ "selector": ".event-start", "value": "/startDate" },
			{ "selector": ".event-end", "value": "/endDate" },
			{ "selector": ".event-location", "value": "/city" },
			{ "selector": ".event-status", "value": "/registrationStatus" },
			{ "selector": ".event-provinces", "value": "/province", "queryall": "li" },
			{ "selector": ".event-registered", "value": "/registeredPeople",
				"mapping": [
					{ "selector": "[data-language]", "value": "/prefLang" },
					{ "selector": "[data-name]", "value": "/name" }
				]
			}
		]
	}'>
		<template>
			<div>
				<h4></h4>
				<div class="event-description"></div>
				<p>Langue: <span class="event-language"></span></p>
				<p>De <span class="event-start"></span> à <span class="event-end"></span></p>
				<p>Emplacement: <span class="event-location"></span></p>
				<p>Statut: <span class="event-status"></span></p>
				<ul class="event-provinces">
					<template>
						<li></li>
					</template>
				</ul>
				<p>Enregistré(s):</p>
				<ul class="event-registered">
					<template>
						<li><span data-name></span> (<span data-language></span>)</li>
					</template>
				</ul>
			</div>
		</template>
	</div>
</div>

Fichier demo/events.json

{
	"data": {
		"eventList": {
			"items": [
				{
					"entitle": "Event #1",
					"frtitle": "Évènement #1",
					"endescription": {
						"html": "<p>This is a big description</p>\n"
					},
					"frdescription": {
						"html": "<p>Ceci est une grosse description</p>\n"
					},
					"startDate": "2023-04-04T10:30:00.000-04:00",
					"endDate": "2023-04-06T10:30:06.000-04:00",
					"eventLanguage": "english",
					"province": [
						"alberta",
						"manitoba",
						"new_brunswick",
						"ontario"
					],
					"city": "Online",
					"registrationStatus": "open",
					"registeredPeople": [
						{
							"name": "John Smith",
							"prefLang": "english"
						},
						{
							"name": "Jimmy Neutron",
							"prefLang": "english"
						}
					]
				},
				{
					"entitle": "Event #2",
					"frtitle": "Évènement #2",
					"endescription": {
						"html": "<p>This is a big description</p>\n"
					},
					"frdescription": {
						"html": "<p>Ceci est une grosse description</p>\n"
					},
					"startDate": "2023-04-04T10:30:00.000-04:00",
					"endDate": "2023-04-06T10:30:06.000-04:00",
					"eventLanguage": "english",
					"province": [
						"british_columbia"
					],
					"city": "Vancouver",
					"registrationStatus": "open",
					"registeredPeople": [
						{
							"name": "Debbie Stark",
							"prefLang": "english"
						}
					]
				},
				{
					"entitle": "Event #3",
					"frtitle": "Évènement #3",
					"endescription": {
						"html": "<p>This is a big description</p>\n"
					},
					"frdescription": {
						"html": "<p>Ceci est une grosse description</p>\n"
					},
					"startDate": "2023-04-04T10:30:00.000-04:00",
					"endDate": "2023-04-06T10:30:06.000-04:00",
					"eventLanguage": "french",
					"province": [
						"quebec"
					],
					"city": "Ottawa",
					"registrationStatus": "closed",
					"registeredPeople": [
						{
							"name": "Pierre Tremblay",
							"prefLang": "french"
						},
						{
							"name": "Marc Gagnon",
							"prefLang": "french"
						},
						{
							"name": "Robert Côté",
							"prefLang": "french"
						}
					]
				}
			]
		}
	}
}

Fichier demo/events-i18n.json

{
	"reference": {
		"language": {
			"en": {
				"english": "English",
				"french": "French"
			},
			"fr": {
				"english": "Anglais",
				"french": "Français"
			}
		},
		"province": {
			"en": {
				"alberta": "Alberta",
				"british_columbia": "British Columbia",
				"manitoba": "Manitoba",
				"new_brunswick": "New Brunswick",
				"newfoundland_labrador": "Newfoundland & Labrador",
				"northwest_territories": "Northwest Territories",
				"nova_scotia": "Nova Scotia",
				"nunavut": "Nunavut",
				"ontario": "Ontario",
				"prince_edward_island": "Prince Edward Island",
				"quebec": "Quebec",
				"saskatchewan": "Saskatchewan",
				"yukon": "Yukon"
			},
			"fr": {
				"alberta": "Alberta",
				"british_columbia": "Colombie-Britannique",
				"prince_edward_island": "Île-du-Prince-Édouard",
				"manitoba": "Manitoba",
				"new_brunswick": "Nouveau-Brunswick",
				"nova_scotia": "Nouvelle-Écosse",
				"nunavut": "Nunavut",
				"ontario": "Ontario",
				"quebec": "Québec",
				"saskatchewan": "Saskatchewan",
				"newfoundland_labrador": "Terre-Neuve-et-Labrador",
				"northwest_territories": "Territoires du Nord-Ouest",
				"yukon": "Yukon"
			}
		},
		"registrationStatus": {
			"en": {
				"open": "Open",
				"closed": "Closed"
			},
			"fr": {
				"open": "Ouvert",
				"closed": "Fermé"
			}
		}
	}
}

Résultat JSON

{
	"items": [
		{
			"entitle": "Event #1",
			"frtitle": "Évènement #1",
			"endescription": {
				"html": "<p>This is a big description</p>\n"
			},
			"frdescription": {
				"html": "<p>Ceci est une grosse description</p>\n"
			},
			"startDate": "2023-04-04",
			"endDate": "2023-04-06",
			"eventLanguage": "English",
			"province": [
				"Alberta",
				"Manitoba",
				"New Brunswick",
				"Ontario"
			],
			"city": "Online",
			"registrationStatus": "Open"
		},
		{
			"entitle": "Event #2",
			"frtitle": "Évènement #2",
			"endescription": {
				"html": "<p>This is a big description</p>\n"
			},
			"frdescription": {
				"html": "<p>Ceci est une grosse description</p>\n"
			},
			"startDate": "2023-04-04",
			"endDate": "2023-04-06",
			"eventLanguage": "English",
			"province": [
				"British Columbia"
			],
			"city": "Vancouver",
			"registrationStatus": "Open"
		},
		{
			"entitle": "Event #3",
			"frtitle": "Évènement #3",
			"endescription": {
				"html": "<p>This is a big description</p>\n"
			},
			"frdescription": {
				"html": "<p>Ceci est une grosse description</p>\n"
			},
			"startDate": "2023-04-04",
			"endDate": "2023-04-06",
			"eventLanguage": "French",
			"province": [
				"Quebec"
			],
			"city": "Ottawa",
			"registrationStatus": "Closed"
		}
	],
	"reference": {
		"language": {
			"en": {
				"english": "English",
				"french": "French"
			},
			"fr": {
				"english": "Anglais",
				"french": "Français"
			}
		},
		"province": {
			"en": {
				"alberta": "Alberta",
				"british_columbia": "British Columbia",
				"manitoba": "Manitoba",
				"new_brunswick": "New Brunswick",
				"newfoundland_labrador": "Newfoundland & Labrador",
				"northwest_territories": "Northwest Territories",
				"nova_scotia": "Nova Scotia",
				"nunavut": "Nunavut",
				"ontario": "Ontario",
				"prince_edward_island": "Prince Edward Island",
				"quebec": "Quebec",
				"saskatchewan": "Saskatchewan",
				"yukon": "Yukon"
			},
			"fr": {
				"alberta": "Alberta",
				"british_columbia": "Colombie-Britannique",
				"prince_edward_island": "Île-du-Prince-Édouard",
				"manitoba": "Manitoba",
				"new_brunswick": "Nouveau-Brunswick",
				"nova_scotia": "Nouvelle-Écosse",
				"nunavut": "Nunavut",
				"ontario": "Ontario",
				"quebec": "Québec",
				"saskatchewan": "Saskatchewan",
				"newfoundland_labrador": "Terre-Neuve-et-Labrador",
				"northwest_territories": "Territoires du Nord-Ouest",
				"yukon": "Yukon"
			}
		},
		"registrationStatus": {
			"en": {
				"open": "Open",
				"closed": "Closed"
			},
			"fr": {
				"open": "Ouvert",
				"closed": "Fermé"
			}
		}
	}
}

Exemple 3

Cet exemple démontre une configuration avancée pour le chargement de fichiers sources multiples, avec la possibilité de spécifier l'emplacement de l'insertion du contenu dans l'ensemble de données du gestionnaire JSON.

Liste des produits français

Liste des produits anglais

Code source 
<div data-wb-jsonmanager='{
	"name": "mappingDataSource",
	"url": [
		"demo/data-fr.json",
		{
			"url": "demo/data-en.json#/products",
			"path": "/english/list"
		}
	]
}'></div>

<div class="row">
	<div class="col-md-6">
		<p>Liste des produits français</p>
		<ul data-wb-json='{
			"url": "#[mappingDataSource]/produits",
			"mapping": [
				{ "selector": "li" }
			]
		}'>
			<template>
				<li></li>
			</template>
		</ul>
	</div>
	<div class="col-md-6">
		<p>Liste des produits anglais</p>
		<ul lang="en" data-wb-json='{
			"url": "#[mappingDataSource]/english/list",
			"mapping": [
				{ "selector": "li" }
			]
		}'>
			<template>
				<li></li>
			</template>
		</ul>
	</div>
</div>

Afficher des résultats à partir d'un JSON RESTful API

Code source

Consult the JSON RESTful API github result: https://api.github.com/repos/wet-boew/wet-boew/issues?labels=Work%3A+Accessibility

<h3>Requête relié à l'accessibilité <small>WET-BOEW sur GitHub</small></h3>

<div class="row">
<aside id="aside" class="col-md-8 col-md-push-2 well" data-wb-jsonmanager='{
		"url": "https://api.github.com/repos/wet-boew/wet-boew/issues?labels=Work%3A+Accessibility",
		"name": "github",
		"patches": [
			{ "op": "wb-count", "path": "/rootArray", "set": "/nbissues" },
			{ "op": "wb-last", "path": "/rootArray", "set": "/last" },
			{ "op": "wb-first", "path": "/rootArray", "set": "/first" },
			{ "op": "wb-toDateISO", "path": "/last/created_at", "set": "/oldest" },
			{ "op": "wb-toDateISO", "path": "/first/created_at", "set": "/recent" },
			{ "op": "add", "path": "/unhideme", "value": "hidden" }
		],
		"wraproot": "rootArray"
	}'>

	<h4 class="mrgn-tp-sm">Vue d'ensemble</h4>

	<ul class="list-unstyled">
		<li>Nombre de problèmes: <span data-json-replace="#[github]/nbissues"></span></li>
		<li>Le plus récent: <a lang="en" class="hidden" data-wb-json='[
				{
					"url": "#[github]/first/title",
					"type": "replace"
				},
				{
					"url": "#[github]/first/html_url",
					"type": "attr",
					"attr": "href"
				},
				{
					"url": "#[github]/unhideme",
					"type": "removeclass"
				}
			]'></a> (<span data-json-replace="#[github]/recent">inconnu</span>)</li>
		<li>Le plus ancien: <a lang="en" class="hidden" data-wb-json='[
				{
					"url": "#[github]/last/title",
					"type": "replace"
				},
				{
					"url": "#[github]/last/html_url",
					"type": "attr",
					"attr": "href"
				},
				{
					"url": "#[github]/unhideme",
					"type": "removeclass"
				}
			]'></a> (<span data-json-replace="#[github]/oldest">inconnu</span>)</li>
	</ul>
	<p><a href="https://github.com/wet-boew/wet-boew/issues?q=is%3Aopen+is%3Aissue+label%3A%22Work%3A+Accessibility%22" hreflang="en">Consulter les problèms sur GitHub</a></p>
</aside>
</div>

<p>Liste des problèmes:</p>

<div data-wb-jsonmanager='{
		"url": "https://api.github.com/repos/wet-boew/wet-boew/issues?labels=Work%3A+Accessibility",
		"name": "github-src",
		"patches": [

			{ "op": "wb-toDateISO", "path": "/updated_at" }
		]
	}'></div>

<ul lang="en" data-wb-json='{
		"url": "#[github-src]",
		"mapping": [
			{ "selector": "a", "value": "/title" },
			{ "selector": "a", "value": "/html_url", "attr": "href" },
			{ "selector": "span", "value": "/updated_at" }
		]
	}'>
	<template>
		<li>(<span></span>) <a href=""></a></li>
	</template>
</ul>

Requête relié à l'accessibilité WET-BOEW sur GitHub

Liste des problèmes:

Contenu d'un fichier provenant de GitHub

L'appel à l'API GitHub pour obtenir le contenu d'un fichier doit être effectué de la sorte :

https://api.github.com/repos/[Nom-Organisation]/[Nom-Répertoire]/contents/[Chemin-Vers-Fichier]

Remarque : Veuillez prendre en considération que GitHub a une limite d'utilisation de son API, qui est présentement réglée à 60 par heure (sans identifiant).

Contenu ici...

Contenu HTML échappé

Code source 
<div data-wb-jsonmanager='{
	"url": "https://api.github.com/repos/wet-boew/wet-boew/contents/src/plugins/data-ajax/ajax/data-ajax-extra-fr.html",
	"name": "githubCode",
	"patches": [
		{ "op": "wb-decodeUTF8Base64", "path": "/content", "set": "/raw" },
		{ "op": "copy", "from": "/raw", "path": "/escape" },
		{ "op": "wb-escapeHTML", "path": "/escape" }
	]
}'>
<div data-json-replace="#[githubCode]/raw">Contenu ici...</div>
<h4>Contenu HTML échappé</h4>
<pre><code data-json-append="#[githubCode]/escape"></code></pre>
</div>

Opération de correctifs JSON

Les opération de correctifs JSON sont définie par RFC6002 - JavaScript Object Notation (JSON) Patch avec quelques ajout d'opération afin de combler les besoins du gestionnaire JSON. Détaillé dans la documentations, les opérations suivant sont supporté par défaut: add, remove, replace, move, copy, test, wb-count, wb-first, wb-last, wb-decodeUTF8Base64, wb-escapeHTML, wb-toDateISO and wb-toDateTimeISO.

Débogage

Vous pouvez utiliser le paramètre de configuration "debug": true afin d'afficher après le gestionnaire json l'objet json modifier ainsi que la liste des correctifs appliqué. Le contenu JSON est affiché sans mise en forme.

Nombre de produits: Non disponible

Code source 
<p data-wb-jsonmanager='{
	"url": "demo/data-fr.json",
	"name": "exemple3",
	"patches": { "op": "wb-count", "path": "/produits", "set": "/nbproduit" },
	"debug": true
}'>Nombre de produits: <span data-json-replace="#[exemple3]/nbproduit">Non disponible</span></p>

Extraire les données des nœuds DOM pour créer l'objet JSON de la source de données

Utilisez replace et mappage sur la même source de données JSON

Le titre de la page est : Non disponible

Le premier H2 est : Non disponible

Tous les H4 de la page :

Afficher le code source 

<p>Utilisez <code>replace</code> et <code>mapping</code> sur la même source de données JSON</p>

<div data-wb-jsonmanager='{
		"name" : "ex1",
		"extractor" : [
			{ "selector" : "title", "path" : "pageTitle" },
			{ "selector" : "h2", "path" : "firstH2"},
			{ "selector" : "h4", "path" : "allH4", "selectAll" : true}
		],
		"wraproot": "rootArray"
	}'>
	<p>Le titre de la page est : <span data-json-replace="#[ex1]/rootArray/pageTitle">Non disponible</span></p>
	<p>Le premier H2 est : <span data-json-replace="#[ex1]/rootArray/firstH2">Non disponible</span></p>
	<p>Tous les H4 de la page :</p>
	<ul data-wb-json='{
			"url" : "#[ex1]/rootArray/allH4",
				"mapping" : [
					{ "selector" : "li" }
				]
		}'>
		<template>
			<li></li>
		</template>
	</ul>
</div>

Regrouper les sélecteurs sur la même source de données JSON

La liste de description ci-dessous est la source des sélecteurs combinés :

Titre 1
Description 1
Titre 2
Description 2
Titre 3
Description 3

Afficher dans un tableau les valeurs combinées des sélecteurs :

Le titre de la page est: Indisponible

Le premier H2 est: Indisponible

Afficher le code source

HTML


<div data-wb-jsonmanager='{
		"name": "ex2",
		"extractor": [
			{ "selector": "title", "path": "pageTitle" },
			{ "selector": "h2", "path": "firstH2" },
			{ "selector": "dl[data-dl]", "path": "monGroup", "extractor": [
				{
					"selector": "dt",
					"path": "title",
					"attr":"data-td"
				},
				{
					"selector": "dd",
					"path": "desc"
				} ]"}
		]
	}'>

	<table class="table table-striped">
		<thead>
			<tr data-wb-json='{
				"url": "#[ex2]/monGroup",
				"mapping": [
					{ "selector": "th", "value": "/title" }
				]
				}'>
				<template>
					<th></th>
				</template>
			</tr>
		</thead>
		<tbody>
			<tr data-wb-json='{
				"url": "#[ex2]/monGroup",
				"mapping": [
					{ "selector": "td", "value": "/desc" }
				]
				}'>
				<template>
					<td></td>
				</template>
			</tr>
		</tbody>
	</table>
	<p> Le titre de la page est: <span data-json-replace="#[ex2]/pageTitle">Indisponible</span></p>
	<p> Le premier H2 est: <span data-json-replace="#[ex2]/firstH2">Indisponible</span></p>


</div>

Extraire les valeurs des attributs de balises ou extraire toutes les valeurs de balises spécifiques :

Tous les H2 de la page :

Tous les H3 de la page (inconnu instances) :

Retourne une valeur null lorsque l'élément n'est pas trouvé par le sélecteur CSS. Test (attendu l'affichage du mot 'fonctionne'):

Afficher le code source

HTML


<div data-wb-jsonmanager='{
		"name": "ex3",
		"extractor": [
			{ "path": "/formfields/pageTitle", "selector": "title" },
			{ "path": "/formfields/lang", "attr":"lang", "selector": "html" },
			{ "path": "/formfields/externalReferer", "interface": "referer" },
			{ "path": "/formfields/submissionPage", "interface": "locationHref" },
			{ "selector": "h2", "path": "allH2", "selectAll":true },
			{ "selector": "h3", "path": "allH3", "selectAll":true }
		],
		"patches": { "op": "wb-count", "path": "/allH3", "set": "/nbH3Total" }
	}'>

	<div data-wb-json='{
		"url" : "#[ex3]/formfields",
		"mapping" : [
			{ "selector" : "input", "attr" : "name", "value" : "/@id" },
			{ "selector" : "input", "attr" : "name", "value" : "/@value" }
		]
	}'>
		<template>
			<input type="text" name="" value="" >
		</template>
	</div>
	<p>Tous les H2 de la page :</p>
	<ul data-wb-json='{
			"url" : "#[ex3]/allH2",
			"mapping" : [
			{ "selector" : "li" }
			]
		}'>
		<template>
			<li></li>
		</template>
	</ul>
	<p>Tous les H3 de la page (<span data-json-replace="#[ex3]/nbH3Total">inconnu</span> instances):</p>
	<ul data-wb-json='{
		"url" : "#[ex3]/allH3",
		"mapping" : [
			{ "selector": "li" }
		]
		}'>
		<template>
			<li></li>
		</template>
	</ul>
	<p>Retourne une valeur <code>null</code> lorsque l'élément n'est pas trouvé par le sélecteur CSS. Test (attendu l'affichage du mot 'fonctionne'):
		<span data-wb-json='{
				"url": "#[ex3]",
				"streamline": true,
				"mapping": [
					{
						"template": "[data-not-found-result]",
						"test": "fn:guessType",
						"assess": "/notfound",
						"expect": "undefined",
						"mapping": null
					}
				]
			}'>
			<template data-not-found-result>
				fonctionne
			</template>
		</span>
	</p>
</div>

Exemple d'essaie spéciale

Consulter la page d'exemple d'essaie spéciale

Date de modification :