The easiest way to show JSON data in HTML & LOTS more!
Show your support!
JSON Tag allows you to -
- fetch & easily render JSON data from a API / URL
- render JSON stored directly inside your HTML document
- and LOTS more
Directly inside of a HTML document using a <json> tag - with no JavaScript experience needed.
You can view a demo of JSON Tag in use here.
How to use JSON Tag:
To use JSON data locally - first you must define the data inside of a <script> tag or another JavaScript file that the DOM can access.
Example JSON data -
<script>
let YourJSONData = {
example: "hello",
example2: "world"
};
</script>Create a <json> tag with the attribute local-json with your variable name of the JSON data - then you can access it like so using pure HTML.
<json local-json="YourJSONData">@{{example}} @{{example2}}.</json>include this script in your HTML document.
<script src="https://cdn.jsdelivr.net/gh/MarketingPipeline/[email protected]/dist/json-tag.min.js" type="module"></script>
How to fetch JSON data from a API / URL:
Instead of using a <json> tag with the attribute local-json use fetch-json with a URL to JSON data.
Note: fetched JSON data will be returned inside of a nested JSON object called json.
Example of usage below!
<json fetch-json="https://api.github.com/users/MarketingPipeline/repos"> Showing a repo from MarketingPipeline<br> Repo title {{json.0.name}} <b>Description</b> {{json.0.description}} <b>Stars</b>: {{json.0.stargazers_count}} Repo URL <a href="{{json.0.url}}">Click to view!</a><br/></json> How to prevent Flash of Unstyled Content:
JSON Tag adds a json-rendered attribute after the element(s) content(s) has been rendered to HTML. This allows you to style / hide unrendered content until it is rendered however you please (via JavaScript page loader, CSS or etc), here is a basic example of hiding un-rendered content using a :not() CSS selector.
Note: by default, if an error occurs a
json-errorattribute will be added to the element.
json:not([json-rendered]) { display: none }How to customize Error Messages:
JSON Tag by default will return any errors inside of the JSON tag. To customize / use your own error message. Simply use a error-message attribute like the following example below -
<json error-message="Your Message Here!"></json>How to handle Errors:
JSON Tag adds a json-error attribute if the element(s) content(s) has NOT been successfully rendered to HTML. This allows you to style / hide unrendered content however you please (via JavaScript, CSS or etc), here is a basic example of hiding un-rendered JSON content using a :has() CSS selector.
json:has(json-error) {
display:none;
}How to use a for loop with local JSON data:
To use a for loop with local JSON data. Your JSON data must be inside of a nested object - example below.
var data = {"list" : [
{
"email": "[email protected]",
"name": "abc",
"date": "05/01/2015"
},
{
"email": "[email protected]",
"name": "xyz",
"date": "05/01/2015"
}
]}; You can then access it via object key name like the example below -
<json local-json="data">{{#list}} Your name is {{name}} and email is {{email}} <br/>{{/list}}How to use a for loop with fetched JSON data:
Note: fetched JSON data will be returned inside of a nested JSON object called json. - example below.
{
"json": {
"list": [
{
"email": "[email protected]",
"name": "abc",
"date": "05/01/2015"
},
{
"email": "[email protected]",
"name": "xyz",
"date": "05/01/2015"
}
]
}
}You can then access it via object key name like the example below -
<json fetch-json="https://YOUR_URL_HERE.com">{{#json.list}} Your name is {{title}} <br/>{{/json.list}}</json>How to use functions with JSON Tag:
To use a JSON key as a function - set the JSON value key as a function like the example(s) below -
<script>
let FunctionExample = {
title: "Joe",
calc: function () {
return 2 + 4;
},
bold: function () {
return function (text) {
return `<b> ${text} was bolded </b>`;
}
},
};
</script>and then use the function(s) in your HTML document - example below.
<json local-json="FunctionExample">Calculate function - {{title}} spends {{calc}}. Bold function - {{#bold}} {{title}}.{{/bold}}</json>JSON Tag uses Mustache templating language which is compiled with Hogan.js. For information on Mustache, see the manpage and the spec.
psstt - you might find another cool function that JSON Tag is capable of via Mustache templating language, if you think you came across something & it should be documented or added, feel free to submit a PR or feature request, etc!
Want to improve this? Create a pull request with detailed changes / improvements! If approved you will be added to the list of contributors of this awesome project!
See also the list of contributors who participate in this project.
This project is licensed under the GPL-3.0 License - see the LICENSE file for details.