Documentations of Data JSON - v0.1.0+alpha

Insert content extracted from a JSON file.

Purpose

Insert content extracted from a JSON file.

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.

Do not use when

Working example

How to implement

  1. Create a valid JSON file

  2. 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>

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:

URI fragment Returning value
# The whole document
#/foo ["bar", "baz"]
#/foo/0 "bar"
#/ 0
#/a~1b 1
#/c%25d 2
#/e%5Ef 3
#/g%7Ch 4
#/i%5Cj 5
#/k%22l 6
#/%20 7
#/m~0n 8

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.

Configuration options

Option Description How to configure Values
Insertion type Configure the origin and destination of the content to be extracted from a JSON file. Add the configuration attribute to the affected element with the value being the URL followed by a JSON pointer hash of the data to be inserted.
data-json-after:
Insert content after the element
data-json-append:
Insert content at the end of the element
data-json-before:
Insert content before the element
data-json-prepend:
Insert content at the start of the element
data-json-replace:
Replace content inside the element
data-json-replacewith:
Replace the element by the content

Events

Event Trigger What it does
wb-init.wb-data-json Triggered manually (e.g., $( "[data-json-after], [data-json-append], [data-json-before], [data-json-prepend], [data-json-replace], [data-json-replacewith]" ).trigger( "wb-init.wb-data-json" );). Used to manually initialize the Data JSON plugin. Note: The Data JSON plugin will be initialized automatically unless the required markup is added after the page has already loaded.
wb-ready.wb-data-json Triggered automatically after the content has been inserted. Used to identify where content has been inserted in by the plugin (target of the event) and to pass along how the content was included ("after", "append", "before", "prepend", "replace" or "replacewith"). 
$( 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 ) {
	});
wb-ready.wb Triggered automatically when WET has finished loading and executing. Used to identify when all WET plugins and polyfills have finished loading and executing. 
$( document ).on( "wb-ready.wb", function( event ) {
	});
wb-contentupdated Triggered automatically when data-json has finished to load the response. Use to perform a secondary action upon inserted content 
$('#mycontainer').on( "wb-contentupdated", function( event, data ){
	});

Source code

Data JSON plugin source code on GitHub

Dependency

JSON fetch plugin source code on GitHub

Date modified: