JSON-Tag

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.

Example and usage

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/JSON-Tag@v1.0.0/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-error attribute 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;
}

Using For Loops

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": "abc@example.com",
       "name": "abc",
       "date": "05/01/2015"
   },
   {
       "email": "xyz@example.com",
       "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": "abc@example.com",
                "name": "abc",
                "date": "05/01/2015"
            },
            {
                "email": "xyz@example.com",
                "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>

Functions

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>

Notice

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!

Contributing

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.

License

This project is licensed under the GPL-3.0 License - see the LICENSE file for details.