Language selection

Government of Canada / Gouvernement du Canada

Search

Do action - JSON

This plugin is used in conjunction with the JSON-Manager and the Data-JSON. Documentation on how to apply the patch is documented in the JSON manager and in the URL mapping patching.

Load a JSON file on demand

Load JSON files:

Data loaded: Nothing loaded yet

View source code

HTML

<p>Load JSON files:</p>
<ul>
<li><button type="button" data-wb-doaction='{ "action": "loadJSON", "source": "#testLoader", "url": "demo/file-1.json" }'>JSON file 1</button></li>
<li><button type="button" data-wb-doaction='{ "action": "loadJSON", "source": "#testLoader", "url": "demo/file-2.json" }'>JSON file 2</button></li>
<li><button type="button" data-wb-doaction='{ "action": "loadJSON", "source": "#testLoader", "url": "demo/file-3.json" }'>JSON file 3</button></li>
<li><button type="button" data-wb-doaction='{ "action": "loadJSON", "source": "#testLoader", "url": "demo/file-4.json" }'>JSON file 4</button></li>
</ul>
<div id="testLoader" data-wb-jsonmanager='{
		"url": "demo/empty.json",
		"name": "jmanager"
	}'></div>
<p>Data loaded: <span data-json-replace="#[jmanager]/data">Nothing loaded yet</span></p>

File demo/file-1.json

{
"data": "From JSON file 1"
}

File demo/file-2.json

{
"data": "+From JSON file 2"
}

File demo/file-3.json

{
"data": "-From JSON file 3"
}

File demo/file-4.json

{
"data": "&From JSON file 4"
}

Apply a JSON patch

Same configuration as described by the URL mapping

Data loaded or patched: Nothing loaded yet

View source code

HTML

<button type="button" data-wb-doaction='{ "action": "patch", "source": "#testLoader", "patches": [
	{ "op": "add", "path": "/data", "value": "Patched Data" }
] }'>Apply a patch</button>
<div id="testLoader" data-wb-jsonmanager='{
		"url": "demo/empty.json",
		"name": "jmanager"
	}'></div>
<p>Data loaded or patched: <span data-json-replace="#[jmanager]/data">Nothing loaded yet</span></p>

File demo/empty.json

{
}

Apply a JSON patch based on a value on an input

Similar as the URL mapping patch working example, and it share the same requirement like a default + a regular expression for parsing.

Data patched as per the value of the input: Nothing loaded yet

View source code

HTML

<label>Enter either of the following 3 value "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}"
		}
	}
] }'>Apply a patch based on User Input</button>
<p id="jmexample3" data-wb-jsonmanager='{ "url": "../wb-urlmapping/demo/data-en.json", "name": "example4", "wait": true }'>Data patched as per the value of the input: <span data-json-replace="#[example4]/city">Nothing loaded yet</span></p>

File demo/data-en.json


{
"city": {
"gat": "Gatineau",
"ott": "Ottawa",
"vdm": "Val-des-monts"
},
"fruit": "Perry",
"country": {
"name": "Canada",
"province": {
"qc": "Quebec",
"on": "Ontario",
"ma": "Manitoba"
}
}
}

Combination of Load and Apply patch based on the value of a date field

Select a delivery option:

Expected delivery date: Date not loaded yet

View source code

HTML



<div class="wb-fieldflow" data-wb-fieldflow='{
	"default": [ { "action": "addClass", "source":"#standardaddremove", "class": "hidden" },
					{ "action": "addClass", "source":"#expressaddremove", "class": "hidden"}]
	}'>
	<p>Select a delivery option:</p>
	<ul>
		<li data-wb-fieldflow='{ "action": "removeClass", "source":"#expressaddremove", "class": "hidden" }'>Express</li>
		<li data-wb-fieldflow='{ "action": "removeClass", "source":"#standardaddremove", "class": "hidden" }'>Standard</li>
	</ul>
</div>

<div id="standardaddremove" class="hidden">
<label>Order date
	<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-en.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}"
				}
			]
		}
	] }
]'>Apply a patch based on Date Input</button>
</div>

<div id="expressaddremove" class="hidden">
<label>Order date
	<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-en.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}"
				}
			]
		}
	] }
]'>Apply a patch based on Date Input</button>
</div>

<div id="smallLoader" data-wb-jsonmanager='{
		"url": "demo/empty.json",
		"name": "jsonsmall",
		"wait": true
	}'></div>

<p>Expected delivery date: <span data-json-replace="#[jsonsmall]/date">Date not loaded yet</span></p>

File demo/doaction-date-en.json


{
	"test" : "test found!",
	"express" : {
		"bad-date" : "Date not found",
		"2019-06-10" : "2019-06-13",
		"2019-06-11" : "2019-06-14",
		"2019-06-12" : "2019-06-15"
	},
	"standard" : {
		"bad-date" : "Date not found",
		"2019-06-10" : "2019-06-20",
		"2019-06-11" : "2019-06-21",
		"2019-06-12" : "2019-06-22"
	}
}

Page details

Date modified: