Data JSON

Insert content extracted from a JSON file.

JSON data used by the following examples

File: demo/data-en.json

{
	"fees": {
		"ABC": "20$"
	},
	"product": "Hello world",
	"products": [
		"My new product",
		"My second product",
		"My product number 3"
	],
	"status": "text-muted",
	"iamtrue": true,
	"iamfalse": false,
	"jour":"2016-11-05T01:42:31Z",
	"anArray": [
		{ "name": "Item 1", "prop": "red" },
		{ "name": "Item 2", "prop": "blue" },
		{ "name": "Item 3", "prop": "yellow" },
		{ "name": "Item 4", "prop": "purple" }
	]
}

Basic example

My product ABC cost (consult our fees schedule)

Your are currently viewing the product "Unknown"

This is a paragraph.

Source code
<p>My product ABC cost <a data-json-replacewith="demo/data-en.json#/fees/ABC" href="#">(consult our fees schedule)</a></p>

<p class="mrgn-tp-md">Your are currently viewing the product &quot;<span data-json-replace="demo/data-en.json#/product">Unknown</span>&quot;</p>

<p class="mrgn-tp-md" data-wb-json='
	[
		{
			"url": "demo/data-en.json#/product",
			"type": "replace"
		},
		{
			"url": "demo/data-en.json#/status",
			"type": "addclass"
		}
	]'>This is a paragraph.</p>

Inserting content...

After an element (after)

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Vivamus ut turpis a elit laoreet pharetra.

At the end of an element (append)

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Vivamus ut turpis a elit laoreet pharetra.

Before an element (before)

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Vivamus ut turpis a elit laoreet pharetra.

At the start of an element (prepend)

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Vivamus ut turpis a elit laoreet pharetra.

Source code
<div class="col-md-6">
	<figure>
		<figcaption class="h3">After an element (<code>after</code>)</figcaption>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing <strong data-json-after="demo/data-en.json#/product">elit.</strong></p>
		<p>Vivamus ut turpis a elit laoreet <strong data-wb-json='{ "url": "demo/data-en.json#/product", "type": "after" }'>pharetra.</strong></p>
	</figure>
</div>

<div class="col-md-6">
	<figure>
		<figcaption class="h3">At the end of an element (<code>append</code>)</figcaption>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing <strong data-json-append="demo/data-en.json#/product">elit.</strong></p>
		<p>Vivamus ut turpis a elit laoreet <strong data-wb-json='{ "url": "demo/data-en.json#/product", "type": "append" }'>pharetra.</strong></p>
	</figure>
</div>

<div class="col-md-6">
	<figure>
		<figcaption class="h3">Before an element (<code>before</code>)</figcaption>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing <strong data-json-before="demo/data-en.json#/product">elit.</strong></p>
		<p>Vivamus ut turpis a elit laoreet <strong data-wb-json='{ "url": "demo/data-en.json#/product", "type": "before" }'>pharetra.</strong></p>
	</figure>
</div>

<div class="col-md-6">
	<figure>
		<figcaption class="h3">At the start of an element (<code>prepend</code>)</figcaption>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing <strong data-json-prepend="demo/data-en.json#/product">elit.</strong></p>
		<p>Vivamus ut turpis a elit laoreet <strong data-wb-json='{ "url": "demo/data-en.json#/product", "type": "prepend" }'>pharetra.</strong></p>
	</figure>
</div>

Replacing...

Content inside the element (replace)

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Vivamus ut turpis a elit laoreet pharetra.

The element by the content (replacewith)

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Vivamus ut turpis a elit laoreet pharetra.

Source code
<div class="col-md-6">
	<figure>
		<figcaption class="h3">Content inside the element (<code>replace</code>)</figcaption>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing <strong data-json-replace="demo/data-en.json#/product">elit.</strong></p>
		<p>Vivamus ut turpis a elit laoreet <strong data-wb-json='{ "url": "demo/data-en.json#/product", "type": "replace" }'>pharetra.</strong></p>
	</figure>
</div>
<div class="col-md-6">
	<figure>
		<figcaption class="h3">The element by the content (<code>replacewith</code>)</figcaption>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing <strong data-json-replacewith="demo/data-en.json#/product">elit.</strong></p>
		<p>Vivamus ut turpis a elit laoreet <strong data-wb-json='{ "url": "demo/data-en.json#/product", "type": "replacewith" }'>pharetra.</strong></p>
	</figure>
</div>

CSS class manipulation

Add a class name (addclass)

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Remove a class name (removeclass)

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Source code
<div class="col-md-6">
	<figure>
		<figcaption class="h3">Add a class name (<code>addclass</code>)</figcaption>
		<p data-wb-json='{ "url": "demo/data-en.json#/status", "type": "addclass" }'>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
	</figure>
</div>
<div class="col-md-6">
	<figure>
		<figcaption class="h3">Remove a class name (<code>removeclass</code>)</figcaption>
		<p class="text-muted" data-wb-json='{ "url": "demo/data-en.json#/status", "type": "removeclass" }'>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
	</figure>
</div>

Update property and value

Property (prop)
Value (val)
Source code
<div class="col-md-6">
	<figure>
		<figcaption class="h3">Property (<code>prop</code>)</figcaption>
		<div class="checkbox">
			<label><input type="checkbox" value="" data-wb-json='{ "url": "demo/data-en.json#/iamtrue", "type": "prop", "prop": "checked" }'>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</label>
			<label><input type="checkbox" value="" checked="checked" data-wb-json='{ "url": "demo/data-en.json#/iamfalse", "type": "prop", "prop": "checked" }'>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</label>
		</div>
	</figure>
</div>
<div class="col-md-6">
	<figure>
		<figcaption class="h3">Value (<code>val</code>)</figcaption>
		<div class="form-group">
			<label class="col-sm-4 control-label" for="label-3">Lorem ipsum</label>
			<div class="col-md-8">
				<input id="label-3" type="text" class="form-control" data-wb-json='{ "url": "demo/data-en.json#/status", "type": "val" }' />
			</div>
		</div>
	</figure>
</div>

Special test case examples

Consult the special test case examples webpage

Date modified: