Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/marketingpipeline/json-tag
Render JSON data in HTML & LOTS more using a json tag
https://github.com/marketingpipeline/json-tag
browser client-side custom-element fetch-api frontend html javascript json json-api json-converter json-data json-parser json-tag json-template json-templates json-to-html mustache mustache-js template-engine
Last synced: 2 months ago
JSON representation
Render JSON data in HTML & LOTS more using a json tag
- Host: GitHub
- URL: https://github.com/marketingpipeline/json-tag
- Owner: MarketingPipeline
- License: gpl-3.0
- Created: 2022-11-09T22:51:39.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2022-11-12T05:45:57.000Z (about 2 years ago)
- Last Synced: 2023-03-05T04:58:08.607Z (almost 2 years ago)
- Topics: browser, client-side, custom-element, fetch-api, frontend, html, javascript, json, json-api, json-converter, json-data, json-parser, json-tag, json-template, json-templates, json-to-html, mustache, mustache-js, template-engine
- Language: JavaScript
- Homepage:
- Size: 72.3 KB
- Stars: 6
- Watchers: 0
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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 `````` tag - with no JavaScript experience needed.
## Example and usage
You can view a demo of JSON Tag in use [here.](https://marketingpipeline.github.io/JSON-Tag/demo)
How to use JSON Tag:
To use JSON data locally - first you must define the data inside of a
Example JSON data -
```js
let YourJSONData = {
example: "hello",
example2: "world"
};
```
Create a `````` tag with the attribute ```local-json``` with your variable name of the JSON data - then you can access it like so using pure HTML.
```html
@{{example}} @{{example2}}.
````
include this [script](https://github.com/MarketingPipeline/JSON-Tag/blob/main/dist/json-tag.min.js) in your HTML document.
How to fetch JSON data from a API / URL:
Instead of using a `````` 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!
```html
Showing a repo from MarketingPipeline
Repo title {{json.0.name}} Description {{json.0.description}} Stars: {{json.0.stargazers_count}} Repo URL Click to view!
```
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.
```css
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 -
```html
```
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.
```css
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.
```js
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 -
```html
{{#list}} Your name is {{name}} and email is {{email}}
{{/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.
```js
{
"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 -
```html
{{#json.list}} Your name is {{title}}
{{/json.list}}
```
## 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 -
```js
let FunctionExample = {
title: "Joe",
calc: function () {
return 2 + 4;
},
bold: function () {
return function (text) {
return `<b> ${text} was bolded </b>`;
}
},
};
```
and then use the function(s) in your HTML document - example below.
```html
Calculate function - {{title}} spends {{calc}}. Bold function - {{#bold}} {{title}}.{{/bold}}
```
## Notice
JSON Tag uses [Mustache](http://mustache.github.io/) templating language which is compiled with [Hogan.js](https://github.com/twitter/hogan.js/). For information
on Mustache, see the [manpage](http://mustache.github.io/mustache.5.html) and
the [spec](https://github.com/mustache/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](https://github.com/MarketingPipeline/JSON-Tag/graphs/contributors) who
participate in this project.
## License 
This project is licensed under the GPL-3.0 License - see the
[LICENSE](https://github.com/MarketingPipeline/JSON-Tag/blob/main/LICENSE) file for
details.