Data JSON Documentation - v1.1-a2

Purpose

Insert content extracted from a JSON file or provided by a dataset.

The role of this plugin is simply to display selected data into HTML elements, if you need to manipulate the data prior it get displayed or you need to interact with, then use this plugin in conjonction with the JSON-manager plugin that provide support for dataset.

Use when

When you need to display the same atomic information on multiple pages. Like a fee for a services that is re-use across multiple pages.

To insert repeatitive content by using HTML5 template element.

Do not use when

• To insert block of HTML content, instead use data-ajax with the filtering option if neccessary.
• For inserting data that only apply to an unique page.

Working example

English:

• Data JSON
• HTML 5 template

French:

• Data JSON
• HTML 5 template

How to implement

1. Create a valid JSON file
2. The one of the following:

   • Add one of the following data-json attributes to an element, with the attribute value being the URL of the JSON file followed by a JSON Pointer (RFC6901) URL hash:

     • data-json-after: Insert content after the element

       <span data-json-after="json/data-en.json#/JSON/Pointer">
       			...
       		</span>

     • data-json-append: Insert content at the end of the element

       <span data-json-append="json/data-en.json#/JSON/Pointer">
       			...
       		</span>

     • data-json-before: Insert content before the element

       <span data-json-before="json/data-en.json#/JSON/Pointer">
       			...
       		</span>

     • data-json-prepend: Insert content at the start of the element

       <span data-json-prepend="json/data-en.json#/JSON/Pointer">
       			...
       		</span>

     • data-json-replace: Replace content inside the element

       <span data-json-replace="json/data-en.json#/JSON/Pointer">
       			...
       		</span>

     • data-json-replacewith: Replace the element by the content

       <span data-json-replacewith="json/data-en.json#/JSON/Pointer">
       			...
       		</span>

   • For HTML5 templating, add the attribute data-wb-json on the elements you wanted to append items. The following populate a list:

     <ul data-wb-json='{
     		"url": "data-en.json#/anArray",
     		"queryall": "li",
     		"mapping": [
     			"/name"
     		]
     	}'>
     	<template>
     		<li></li>
     	</template>
     </ul>

     Where:

     url

     JSON file location or dataset name followed by an optional JSON pointer

     queryall

     Contain a valid CSS selector.

     mapping

     Array of JSON pointer, as many as the return result of queryall applied on the <template> element.

     Note: When using the template for filling a table, wrap your rows template into a table element in order to avoid a bug in Internet Explorer.

   • Use the data for shapping multiple area of an HTML element

     <a href="generic/location.html" data-wb-json='[
     		{
     			"url": "mydata.json#/first/title",
     			"type": "replace"
     		},
     		{
     			"url": "mydata.json#/first/html_url",
     			"type": "prop",
     			"prop": "href"
     		}
     	]'>Generic location</a>

Selecting data

(Source: JSON Pointer, RCF6901)

For example, given the JSON document

{
	"foo": ["bar", "baz"],
	"": 0,
	"a/b": 1,
	"c%d": 2,
	"e^f": 3,
	"g|h": 4,
	"i\\j": 5,
	"k\"l": 6,
	" ": 7,
	"m~n": 8
}

The following URI fragment identifiers evaluate to the accompanying values:

Issue that you may encounter

Display nothing, plugin seems to be broken.

Ensure that your JSON file is valid

Recently updated data do not display

Refresh your browser cache by opening a new tab the JSON file and then do a hard refresh Ctrl + F5 or by testing your page from a new private mode session of your browser.

Cache busting

Before to use the cache busting mechanism with your data json instance, it's highly recommended to configure your server properly instead.

Various strategy can be set on the server side and those are communicated to the browser through an http header as defined in section 5 of RFC7234.

Configuration options

Events

$( document ).on( "wb-ready.wb-data-json", "[data-json-after], [data-json-append], [data-json-before], [data-json-prepend], [data-json-replace], [data-json-replacewith]", function( event, ajaxType ) {
	});

$( "[data-json-after], [data-json-append], [data-json-before], [data-json-prepend], [data-json-replace], [data-json-replacewith]" ).on( "wb-ready.wb-data-json", function( event, ajaxType ) {
	});

$( document ).on( "wb-ready.wb", function( event ) {
	});

$('#mycontainer').on( "wb-contentupdated", function( event, data ){
	});

Source code

Data JSON plugin source code on GitHub

Dependency

JSON fetch plugin source code on GitHub