JSON Manager

HTML

<div data-wb-jsonmanager='{
		"url": "demo/data-en.json",
		"name": "example1",
		"patches": [
			{ "op": "wb-count", "path": "/products", "set": "/nbproduct" },
			{ "op": "copy", "from": "/products/0", "path": "/product"},
			{ "op": "wb-nbtolocal", "path": "/price", "prefix": "$" }
		]
	}'></div>
<p>There is <span data-json-replace="#[example1]/nbproduct">unknown number of</span> products costing <span data-json-replace="#[example1]/price">(N/A)</span> each.</p>
<p>My first product is <span data-json-replace="#[example1]/product">(unknown)</span> and the original product was <span data-json-replace="demo/data-en.json#/product">(unknown)</span>.</p>

<div data-wb-jsonmanager='{
		"url": "demo/data-en.json#/level1/level2",
		"name": "example2",
		"patches": [
			{ "op": "wb-toDateISO", "path": "/itm1" }
		]
	}'>
	<p>Patch an array of object:</p>
	<ul data-wb-json='{
			"url": "#[example2]",
			"mapping": [
				{ "selector": "li", "value": "/itm1" }
			]
		}'>
		<template>
			<li></li>
		</template>
	</ul>
</div>

File demo/data-en.json

{
	"product": "Hello world",
	"products": [
		"My first product",
		"My second product",
		"My third product",
		"My forth product"
	],
	"level1": {
		"level2": [
			{
				"itm1": "2016-11-30T07:53:56Z"
			},
			{
				"itm1": "2017-02-01T16:52:00Z"
			},
			{
				"itm1": "2013-09-08T14:14:14Z"
			}
		]
	},
	"price": 1234.98
}

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

<h3>Work Accessibility issue <small>WET-BOEW on 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">Overview</h4>

	<ul class="list-unstyled">
		<li>Number of issues: <span data-json-replace="#[github]/nbissues"></span></li>
		<li>Most recent issue: <a 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">unknown</span>)</li>
		<li>Oldest issue: <a 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">unknown</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">View open issues on GitHub</a></p>
</aside>
</div>

<p>List of issues:</p>

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

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

<ul 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>

<p data-wb-jsonmanager='{
	"url": "demo/data-en.json",
	"name": "example3",
	"patches": { "op": "wb-count", "path": "/products", "set": "/nbproduct" },
	"debug": true
}'>Number of products: <span data-json-replace="#[example3]/nbproduct">Not available</span></p>