URL Mapping - Patching JSON

Execute pre-configured JSON patches action based on url query string.

For the purpose of the following working example there is multiple instance of wb-urlmapping but it they can be all included in one instance. Having all of them in one is the recommend approach.

JSON files source code

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

Applying patches


My city is: somewhere

My fruit is: all of them

The wait configuration let the json-manager wait until it receives patches from another plugin before of updating data-json content.

Source code
<div data-wb-urlmapping='{
		"example1a": { "action": "patch", "source": "#jmexample1", "patches": [
				{ "op": "add", "path": "/city", "value": "Gatineau" },
				{ "op": "add", "path": "/fruit", "value": "Apple" }
		"example1b": { "action": "patch", "source": "#jmexample1", "patches": [
				{ "op": "add", "path": "/city", "value": "Ottawa" },
				{ "op": "add", "path": "/fruit", "value": "Orange" }
		"example1c": { "action": "patch", "source": "#jmexample1", "patches": [
				{ "op": "add", "path": "/city", "value": "Hull" }
		"example1d": { "action": "patch", "source": "#jmexample1", "patches": [
				{ "op": "add", "path": "/fruit", "value": "Kiwi" }
		"multiplequery": true

	<li><a href="?">Empty <code>?</code></a></li> 
	<li><a href="?example1a">Gatineau and Apple <code>?example1a</code></a></li>
	<li><a href="?example1b">Ottawa and Orange <code>?example1b</code></a></li>
	<li><a href="?example1c&amp;example1d">Hull and Kiwi <code>?example1c&amp;example1d</code></a></li>
<section class="well" id="jmexample1" data-wb-jsonmanager='{
			"url": "demo/empty.json",
			"name": "example1",
			"wait": true
	<h3 class="mrgn-tp-sm">Results</h3>
	<p>My city is: <span data-json-replace="#[example1]/city">somewhere</span></p>
	<p>My fruit is: <span data-json-replace="#[example1]/fruit">all of them</span></p>

Use the page query for patches


It uses the value of the parameter as a key for copying to the parent element.

The city selected is: somewhere

Source code
<ul data-wb-urlmapping='{ "city" : { "action": "patch", "source": "#jmexample2", "base": "/city", "match": "^[a-z][a-z][a-z]$", "default": "gat" } }'>
	<li><a href="?#ex2">Empty <code>?</code></a></li> 
	<li><a href="?city=gat#ex2">Gatineau <code>?city=gat</code></a></li>
	<li><a href="?city=ott#ex2">Ottawa <code>?city=ott</code></a></li>
	<li><a href="?city=vdm#ex2">Val-des-monts <code>?city=vdm</code></a></li>
	<li><a href="?city=hull#ex2">Hull <code>?city=hull</code></a> (Fallback on default <code>gat</code>)</li>
	<li><a href="?city=hul#ex2">Hull <code>?city=hul</code></a> (Do nothing)</li>

<p id="jmexample2" data-wb-jsonmanager='{ "url": "demo/data-en.json", "name": "example2", "wait": true }'>The city selected is: <span data-json-replace="#[example2]/city">somewhere</span></p>

Be specific

Defining the following configuration will overwrite/control how the page query could interact with the patches action.


Source code
<ul data-wb-urlmapping='{ 
		"ex3a" : { "action": "patch", "source": "#jmexample3", "base": "/city", "match": "^[a-z][a-z][a-z]$", "default": "vdm" },
		"ex3b" : { "action": "patch", "source": "#jmexample3", "base": "/city", "qval": "gat" },
		"ex3c=example" : { "action": "patch", "source": "#jmexample3", "base": "/city", "qval": "ott" },
		"ex3d" : { "action": "patch", "source": "#jmexample3", "base": "/country/province", "match": "^[a-z][a-z]$", "default": "ma" }
	<li><a href="?#ex3">Empty <code>?</code></a></li> 
	<li><a href="?ex3a#ex3">base is "/city", fallback on default <code>?ex3a</code></a></li>
	<li><a href="?ex3a=gat#ex3">base is "/city", showing Gatineau <code>?ex3a=gat</code></a></li>
	<li><a href="?ex3a=ott#ex3">base is "/city", showing Ottawa <code>?ex3a=ott</code></a></li>
	<li><a href="?ex3b#ex3">base is "/city" with "gat" set as value, showing Gatineau <code>?ex3b</code></a></li>
	<li><a href="?ex3c=example#ex3">base is "/city" with "ott" set as value, showing Ottawa <code>?ex3c=example</code></a></li>
	<li><a href="?ex3d#ex3">base is "/province" with a root "/country/", fallback on default <code>?ex3d</code></a></li>
	<li><a href="?ex3d=on#ex3">base is "/province" with a root "/country/", showing Ontario <code>?ex3d=on</code></a></li>
	<li><a href="?ex3d=qc#ex3">base is "/province" with a root "/country/", showing Quebec <code>?ex3d=qc</code></a></li>

<ul id="jmexample3" data-wb-jsonmanager='{ "url": "demo/data-en.json", "name": "example4", "wait": true }'>
	<li>City: <span data-json-replace="#[example4]/city">not defined</span></li>
	<li>Province: <span data-json-replace="#[example4]/country/province">not defined</span></li>
Date modified:
Report a problem on this page
Please select all that apply:

Thank you for your help!

You will not receive a reply. For enquiries, please contact us.