JSON Tag Example

Easily display JSON data locally or from API / URL in your HTML - no JavaScript knowledge required.

View Source Code On GitHub

Example(s)

Display JSON from local HTML document

Define your JSON data as a variable: 
<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. Example below - 

 <json local-json="YourJSONData">@{{example}} @{{example2}}.</json>
Show JSON data from local HTML document Showing data from local JSON list
@{{example}} @{{example2}}.

Display JSON from 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"> All of MarketingPipeline's public repos - {{#json}} Repo title {{name}} <b>Description</b> {{description}} <b>Stars</b>: {{stargazers_count}} Repo URL <a href="{{url}}">Click to view!</a><br/>{{/json}}</json>
Show JSON data from API / URL Showing all of MarketingPipeline's public repos from GitHub API via JSON Tag

All of MarketingPipeline's public repos
{{#json}} Repo title {{name}} Description {{description}} Stars: {{stargazers_count}} Repo URL Click to view!
{{/json}}