Effectuer un action - JSON
Cette application est utilisé avec JSON-Manager et Data-JSON. La documentation sur l'application du correctif est documentée dans le gestionnaire JSON et dans le correctif de mappage d'URL.
Télécharger un fichier JSON sur demande
Télécharger les fichiers
Téléchargement des données: rien n'est encore télechargé
Code source
HTML
<p>Télécharger les fichiers:</p>
<ul>
<li><button type="button" data-wb-doaction='{ "action": "loadJSON", "source": "#testLoader", "url": "demo/file-1-fr.json" }'>JSON fichier 1</button></li>
<li><button type="button" data-wb-doaction='{ "action": "loadJSON", "source": "#testLoader", "url": "demo/file-2-fr.json" }'>JSON fichier 2</button></li>
<li><button type="button" data-wb-doaction='{ "action": "loadJSON", "source": "#testLoader", "url": "demo/file-3-fr.json" }'>JSON fichier 3</button></li>
<li><button type="button" data-wb-doaction='{ "action": "loadJSON", "source": "#testLoader", "url": "demo/file-4-fr.json" }'>JSON fichier 4</button></li>
</ul>
<div id="testLoader" data-wb-jsonmanager='{
"url": "demo/empty.json",
"name": "jmanager"
}'></div>
<p>Téléchargement des données: <span data-json-replace="#[jmanager]/data">rien n'est encore télechargé</span></p>Fichier demo/file-1-fr.json
{"data": "Du fichier JSON 1"}Fichier demo/file-2-fr.json
{"data": "+Du fichier JSON 2"}Fichier demo/file-3-fr.json
{"data": "-Du fichier JSON 3"}Fichier demo/file-4-fr.json
{"data": "&Du fichier JSON 4"}Appliquer un correctif JSON
Utiliser la même configuration que celle décrite par le mappage d'URL
Téléchargement des données: rien n'est encore télechargé
Code source
HTML
<button type="button" data-wb-doaction='{ "action": "patch", "source": "#testLoader", "patches": [
{ "op": "add", "path": "/data", "value": "Patched Data" }
] }'>Appliquer un correctif</button>
<div id="testLoader" data-wb-jsonmanager='{
"url": "demo/empty.json",
"name": "jmanager"
}'></div>
<p>Téléchargement des données: <span data-json-replace="#[jmanager]/data">rien n'est encore télechargé </span></p>Fichier demo/empty.json
{
}Appliquer un correctif JSON basé sur une valeur d'une entrée
Similaire à l'exemple de travail du correctif de mappage d'URL, elle partage les mêmes exigences qu'une expression par défaut + une expression régulière pour l'analyse.
Données corrigées selon la valeur de l'entrée: Rien n'est encore chargé
Code source
HTML
<label>Entrez l'une des 3 valeurs suivantes "vdm" | "gat" | "ott"
<input id="myinput" value="">
</label>
<button type="button" data-wb-doaction='{ "action": "withInput", "srcInput": "#myinput", "actions": [
{
"action": "patch", "source": "#jmexample3", "base": "/city", "match": "^[a-z][a-z][a-z]$", "default": "vdm",
"patches" : {
"op": "move",
"path": "{base}",
"from": "{base}/{qval}"
}
}
] }'>Appliquer un correctif basé sur l'entrée d'utilisateur</button>
<p id="jmexample3" data-wb-jsonmanager='{ "url": "../wb-urlmapping/demo/data-fr.json", "name": "example4", "wait": true }'>Données corrigées selon la valeur de l'entrée: <span data-json-replace="#[example4]/city">Rien n'est encore chargé</span></p>Fichier demo/data-en.json
{
"city": {
"gat": "Gatineau",
"ott": "Ottawa",
"vdm": "Val-des-monts"
},
"fruit": "Perry",
"country": {
"name": "Canada",
"province": {
"qc": "Québec",
"on": "Ontario",
"ma": "Manitoba"
}
}
}
Combinaison de télécharger et appliquer correctif basé sur la valeur d'un champ de date
- Cet exemple inclut un élément de flux de champ utilisé pour afficher / masquer le code HTML approprié à l'aide des actions ajouterClasse"addClass" et supprimerClasse quot;removeClass" de la classe caché "hidden".
- La différence dans le corretif "copier" est visible dans le paramètre "de". Un est "standard" et l'autre, "express". Ceci définit le chemin pour la recherche JSON.
- L'action "withIput" nécessite un paramètre "match" et une paramètre "default". Le paramètre "match" est une expression rationnelle pour les valeurs acceptables attendues du paramêtre "srcInput". Le paramêtre "défaut" peut être une clé pour une recherche JSON - généralement un message d'erreur.
Sélectionnez une option de livraison:
- Rapide
- Standard
Date de livraison prévue: Date pas encore été téléchargé
Code source
HTML
<div class="wb-fieldflow" data-wb-fieldflow='{
"default": [ { "action": "addClass", "source":"#standardaddremove", "class": "hidden" },
{ "action": "addClass", "source":"#expressaddremove", "class": "hidden"}]
}'>
<p>Sélectionnez une option de livraison:</p>
<ul>
<li data-wb-fieldflow='{ "action": "removeClass", "source":"#expressaddremove", "class": "hidden" }'>Rapide</li>
<li data-wb-fieldflow='{ "action": "removeClass", "source":"#standardaddremove", "class": "hidden" }'>Standard</li>
</ul>
</div>
<div id="standardaddremove" class="hidden">
<label>Date de commande
<input type="date" id="standarddatefield" min="2019-06-10" max="2019-06-12" value="">
</label>
<button type="button" data-wb-doaction='[
{ "action": "loadJSON", "source": "#smallLoader", "url": "demo/doaction-date-fr.json" },
{ "action": "withInput", "srcInput": "#standarddatefield", "actions": [
{
"action": "patch", "source": "#smallLoader", "match": "^20[1,2][8,9,0]-[1,0][0-9]-[0,1,2,3][0-9]$", "default": "bad-date",
"patches" : [
{
"op": "copy",
"path": "/date",
"from": "/standard/{qval}"
}
]
}
] }
]'>Appliquez un correctif basé sur la date entrée</button>
</div>
<div id="expressaddremove" class="hidden">
<label>Date de commande
<input type="date" id="expressdatefield" min="2019-06-10" max="2019-06-12" value="">
</label>
<button type="button" data-wb-doaction='[
{ "action": "loadJSON", "source": "#smallLoader", "url": "demo/doaction-date-fr.json" },
{ "action": "withInput", "srcInput": "#expressdatefield", "actions": [
{
"action": "patch", "source": "#smallLoader", "match": "^20[1,2][8,9,0]-[1,0][0-9]-[0,1,2,3][0-9]$", "default": "bad-date",
"patches" : [
{
"op": "copy",
"path": "/date",
"from": "/express/{qval}"
}
]
}
] }
]'>Appliquez un correctif basé sur la date entrée</button>
</div>
<div id="smallLoader" data-wb-jsonmanager='{
"url": "demo/empty.json",
"name": "jsonsmall",
"wait": true
}'></div>
<p>Date de livraison prévue: <span data-json-replace="#[jsonsmall]/date">Date pas encore été téléchargé</span></p>
<div>
<ul data-wb-json='{
"url": "#[example2]",
"mapping": [
{ "selector": "li", "value": "/itm1" }
]
}'>
Fichier demo/doaction-date-fr.json
{
"test" : "test trouvé!",
"express" : {
"bad-date" : "Date introuvable",
"2019-06-10" : "2019-06-13",
"2019-06-11" : "2019-06-14",
"2019-06-12" : "2019-06-15"
},
"standard" : {
"bad-date" : "Date introuvable",
"2019-06-10" : "2019-06-20",
"2019-06-11" : "2019-06-21",
"2019-06-12" : "2019-06-22"
}
}
Détails de la page
- Date de modification :