json2html

https://www.json2html.com/
Admin
json2html is a lightweight HTML rendering library that converts JSON templates to interactive HTML,...
Tokens:7,475
Snippets:103
Trust Score:8.8
Update:5 months ago
Show doc for...
Tokens:
Raw
### Install j2h Framework (Node.js)

Source: https://www.json2html.com/quickstart

Install the j2h framework using npm for your Node.js project.

```bash
# Install the j2h framework in your project
npm install j2h-framework

```

--------------------------------

### Install json2html Library (Node.js)

Source: https://www.json2html.com/quickstart

Install the json2html library using npm for your Node.js project.

```bash
# Install the json2html library in your project
npm install node-json2html

```

--------------------------------

### Invoking Refresh with an Updated State

Source: https://www.json2html.com/refresh

Demonstrates how to update the internal state and then call json2html.refresh() with a specific ID to update a part of the rendered template. This example adds a new user and refreshes the user list.

```javascript
   let state = {
        "users":[
            {"id":"chad","name":"Chad Black"},
            {"id":"ashley","name":"Ashley White"},
        ]
    }

    let template = [
        {"<>":"h1","text":"User List"},

        {"<>":"div","html":[
            {"<>":"button","text":"Add User","onclick":e=>{
                let state = e.obj;

                state.users.push({"id":"bobby","name":"Bobby Blue"});

                json2html.refresh("user-list");
            }}
        ]},

        {"<>":"ul","#":"user-list","html":[
            {"<>":"li","{}":o=>o.users,"html":[
                {"<>":"span","text":"${name}"}
            ]}
        ]}
    ];

    document.querySelector("body").json2html(state,template);
```

--------------------------------

### Refreshing an HTML Element within a Component

Source: https://www.json2html.com/refresh

Shows how to attach a refresh ID to the top-level HTML element of a component to enable partial refreshing. This example updates a user's name and refreshes their list item.

```javascript
   let state = {
        "users":[
            {"id":"chad","name":"Chad Black"},
            {"id":"ashley","name":"Ashley White"},
        ]
    };

    json2html.component.add("user/item",[
        {"<>":"li","#":"user-${id}","html":[
            {"<>":"span","text":"${name}"}
        ]}
    ]);

    let template = [
        {"<>":"h1","text":"User List"},

        {"<>":"ul","html":[
            {"[]":"user/item","{}":o=>o.users}
        ]}
    ];

    document.querySelector("body").json2html(state,template);

    state.users[0].name = "Chad White";

    json2html.refresh("user-chad");
```

--------------------------------

### Initialize j2h App with Page.js (Browser)

Source: https://www.json2html.com/quickstart

Use the j2h page.js plugin to define and route pages for your client-side web application.

```javascript
(async ()=>{
    
    //Pages that we want in our app
    let pages = {
        "home":await j2h.require("/pages/home.js")
    };
    
    //Apply the routes
    j2h.app.page("/",pages.home);
    
    //Start the web app
    j2h.app.listen();

})(); 

```

--------------------------------

### Registering and Using Components

Source: https://www.json2html.com/core

Register reusable template structures as components using `json2html.component.add()`. These components can then be referenced within other templates.

```javascript
let users = [
    {"name":"Chad","removed":true},
    {"name":"Alex","removed":false}
];

//Register the user component
json2html.component.add("user",{"<>":"li","text":"${name}"});

let template = [
    {"<>":"h1","text":"Users"},
    {"<>":"ul","html":[
        {"[]":"user,"{}":o=>o.users}
    ]}
];

let html = json2html.render({"users":users},template);
```

--------------------------------

### json2html Integrations

Source: https://www.json2html.com/core

Demonstrates how to integrate json2html with native JavaScript, jQuery, and Node.js for rendering HTML in different environments.

```javascript
//Native Javascript
document.querySelector("body").json2html({},{"<>":"h1","text":"Hello World!"});

//jQuery
$("body").json2html({},{"<>":"h1","text":"Hello World!"});

//Node.js
let html = json2html.render({},{"<>":"h1","text":"Hello World!"});
```

--------------------------------

### Create a Static j2h Page (Node.js)

Source: https://www.json2html.com/quickstart

Define a j2h page with a static template and data for server-side rendering.

```javascript
const j2h = require("j2h-framework");

class Page extends j2h.Page {
    
    constructor() {
      
        //Render as a static web page
        super("static");

        //Re-usable componets that this page uses
        this.components = {};
        
        //The pages template
        this.template = [
            {"<>":"html","html":[
                {"<>":"head","html":[
                    {"<>":"title","text":"${title}"}
                ]},
                {"<>":"body","html":[
                    {"<>":"h2","text":"${title}"},
                    {"<>":"a","href":"${url}","text":"Get Started"}
                ]}
            ]}
        ];
    }
    
    async data(req) {
    
        return({
            "title":"My First j2h Page",
            "url":"https://www.json2html.com"
        });
    }
}

module.exports = new Page(); 

```

--------------------------------

### Specify Component with '[]' Attribute

Source: https://www.json2html.com/attributes

Use the '[]' attribute to specify which component (by name) to use for rendering. This is typically used within lists or when dynamically selecting components.

```json
{"<>":"ul","html":[
    {"[]":"user","{}":o=>o.users}
]}
```

```json
{"<>":"ul","html":[
    {"[]":o=>{
        return("user");
    },"{}":o=>o.users}
]}
```

--------------------------------

### Include json2html Library

Source: https://www.json2html.com/quickstart

Add this script tag to your HTML to include the json2html library from a CDN.

```html
<script src="https://cdnjs.cloudflare.com/ajax/libs/json2html/3.3.2/json2html.min.js"></script>
```

--------------------------------

### Create a j2h Page with Export (Browser)

Source: https://www.json2html.com/quickstart

Define a j2h page using j2h.export for use in a browser environment, including its template and data fetching logic.

```javascript
j2h.export("/pages/home.js",(

    class extends j2h.Page {
    
        constructor(){
            
            super();
            
            //Re-usable componets that this page uses
            this.components = {};
            
            //Component template
            this.template = [
                {"<>":"section","html":[
                    {"<>":"h2","text":"${title}"},
                    {"<>":"a","href":"${url}","text":"Get Started"}
                ]}
            ];
        }
        
        //Get the data state for this page
        async data(req) {
            
            return({
                "title":"My First j2h Page",
                "url":"https://www.json2html.com"
            });
        }
    }

));

```

--------------------------------

### Include j2h Framework Scripts (Browser)

Source: https://www.json2html.com/quickstart

Add the necessary script tags to include the j2h client-side framework, json2html core, and page.js in your HTML.

```html
<script src="https://cdnjs.cloudflare.com/ajax/libs/page.js/1.11.6/page.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/json2html/3.3.2/json2html.min.js"></script>
<script src="j2h.js"></script>

```

--------------------------------

### Specify Component Name with [] Attribute

Source: https://www.json2html.com/components

The [] attribute specifies the component to render. It can be a literal string or an inline function returning the component name.

```javascript
{"[]":"heading"}
```

--------------------------------

### Retrieve a Component with json2html.components.get

Source: https://www.json2html.com/components

Use this method to retrieve the template of a registered component. Components are typically used within templates via the [] attribute.

```javascript
let template = json2html.components.get("user/name");
```

--------------------------------

### Using Components in Templates

Source: https://www.json2html.com/components

Components reduce redundant code and can be referenced in templates using the [] attribute, specifying the component to render.

```javascript
json2html.components.add("heading",{"<>":"h1","text":"${title}"});

let template = [
    {"[]":"heading"},
    {"<>":"p","text":"Get started today!"}
];

let state = {
    "title":"My App"
};

document.write( json2html.render(state,template) );
```

--------------------------------

### Register a Component with json2html.components.add

Source: https://www.json2html.com/components

Use this method to register a template as a named component. Namespaces are recommended to avoid collisions.

```javascript
json2html.components.add("user/name",{"<>":"span","text":"${user.name}"});
```

--------------------------------

### Render HTML with json2html (Node.js)

Source: https://www.json2html.com/quickstart

Use the json2html library to render an HTML string from JSON data and a specified template in Node.js.

```javascript
const json2html = require("node-json2html");
 
let template = {"<>":"div","text":"${title} ${year}"};
    
let data = [
    {"title":"Heat","year":"1995"},
    {"title":"Snatch","year":"2000"},
    {"title":"Up","year":"2009"},
    {"title":"Unforgiven","year":"1992"},
    {"title":"Amadeus","year":"1984"}
];
    
let html = json2html.render(data,template);

```

--------------------------------

### Rendering JSON Templates with Data

Source: https://www.json2html.com/core

Render a JSON template with a data state to assign values or repeat elements. The template uses `${propertyName}` syntax to reference data.

```javascript
let users = [
    {"name":"Chad"},
    {"name":"Alex"}
];

let template = {"<>":"p","text":"${name}"};

document.write( json2html.render(users,template) );
```

--------------------------------

### Map Component Parameters with Template Literal

Source: https://www.json2html.com/assignment

Use template literals with ${@parameterName} to map component parameters to your template. The '@' symbol distinguishes component parameters from state.

```javascript
json2html.component.add("profile",{"<>":"li","text":"${name}","class":"w-${@width}});
```

```javascript
let template = [
    {"<>":"ul","html":[
        {"[]":"profile","width":10}
    ]}
];

let profiles = [
    {"name":"John"},
    {"name":"Ashley"},
];

document.write( json2html.render(profiles,template) );
```

--------------------------------

### Use Parameters within Components

Source: https://www.json2html.com/components

Parameters can be referenced using template literals ${@..} or via an inline function within the component template.

```javascript
json2html.components.add("square",[
    {"<>":"div","style":"width:${@width}px; height:${@height}px;"}
])

let template = [
    {"[]":"square","width":20,"height":30}
];

document.write( json2html.render({},template) );
```

--------------------------------

### Alternative to Block for Mapping State with Div

Source: https://www.json2html.com/blocks

Similar to using a block, a standard HTML element like a 'div' can also be used with the '{}' attribute to map state to repeated elements, offering flexibility in DOM structure.

```javascript
let template = [

    {"<>":"h1","text":"${title}"},

    {"<>":"div","{} ":o=>o.products,"html":[
        {"<>":"h2":"${name}"},
        {"<>":"p","${desc}"}
    ]}
];
```

--------------------------------

### Integrate j2h Framework with Express (Node.js)

Source: https://www.json2html.com/quickstart

Extend your Express app with the j2h framework to create pages and route requests.

```javascript
const app = require("express")(),
    j2h = require("j2h-framework");

//extend express app.page
app.page = j2h.express.page;

//create a new instance of your page
const home = new require("./pages/home.js")();

//route to your page
app.page("/",home);

//listen
app.listen(80);

```

--------------------------------

### Render Dynamic HTML with Function

Source: https://www.json2html.com/blocks

An inline function can be used with the 'html' attribute to generate dynamic HTML content based on logic.

```javascript
{"html":o=>{
    return("<p>" + [...Array(10).keys()].join(" ") + "</p>");
}}
```

--------------------------------

### Call function on DOM ready with json2html

Source: https://www.json2html.com/attributes

Use the 'onready' attribute to specify a custom inline function that executes once the DOM element is fully rendered. This event is specific to json2html.

```javascript
{"<>":"div","onready":e=>{

    //e.obj : data state
    //e.props : component properties (if applicable)

    console.log("DIV is ready on the DOM");
}}
```

--------------------------------

### Specify DOM Element with '<>'

Source: https://www.json2html.com/attributes

Use the '<>' attribute to specify the DOM element type to render. This is required for rendering DOM elements and should not be used in blocks or components.

```json
{"<>":"div"}
```

--------------------------------

### Assign State Variable with '>>' Attribute

Source: https://www.json2html.com/attributes

Use the '>>' attribute to link input elements to data state variables. Changes in the input element will update the specified state variable.

```json
{"<>":"input","type":"text",">>":"user.name"}
```

--------------------------------

### Pass Component Parameters

Source: https://www.json2html.com/components

Non-reserved attributes like [], {}, and html are passed as parameters to the component. Other attributes are treated as component parameters.

```javascript
{"[]":"square","width":20,"height":30}
```

--------------------------------

### Render JSON Data with json2html

Source: https://www.json2html.com/quickstart

Use this JavaScript code to define a template and data, then render it to an HTML element using json2html. Works with both native JavaScript and jQuery.

```javascript
let template = {"<>" :"div", "text":"${title} ${year}"};
    
let data = [
    {"title":"Heat","year":"1995"},
    {"title":"Snatch","year":"2000"},
    {"title":"Up","year":"2009"},
    {"title":"Unforgiven","year":"1992"},
    {"title":"Amadeus","year":"1984"}
];

//native javascript
document.getElementById("result").json2html(data,template);

//or with jQuery
$("#result").json2html(data,template);
```

--------------------------------

### Conditional Class with Inline Function

Source: https://www.json2html.com/assignment

Use an inline function with parameters (o, i, p) to dynamically set component parameters like class names based on conditions.

```javascript
{"<>" :(o,i,p)=>{
    if(p.size > 10) return("large");
    else return("small");
}}
```

--------------------------------

### Render List Items with Inline Function for Text Formatting

Source: https://www.json2html.com/assignment

Utilize inline functions to process array items and format their text content. The function receives the state object (o), index (i), and component parameters (p).

```javascript
let template = [
    {"<>":"ul","html":[
        {"<>":"li","{} ":o=>o.products,"text":(o,i,p)=>{
            return(i + ". " + o.name + " $ " + Math.round(o.price) );
        }}
    ]}
];

let state = {
    "products":[
        {"name":"Cookies","price":14.6234},
        {"name":"Crackers","price":9.943}
    ]
}

document.write( json2html.render(state,template) );
```

--------------------------------

### Render Plain Text with Text Attribute

Source: https://www.json2html.com/blocks

Use the 'text' attribute to output plain text. Special HTML characters are automatically encoded. This is recommended for literal strings to prevent XSS attacks.

```javascript
let template = {"text":"Hello ${name}"};

let state = {"name":"Chad"};

let rendered = json2html.render(state,template);
```

--------------------------------

### Specify Data Object with '{}' Attribute

Source: https://www.json2html.com/attributes

Use the '{}' attribute to specify which part of the data state object should be used for rendering within a template. This is useful for nested data structures.

```javascript
let state = {
    "title":"Active Users",
    "users":[
        {"name":"Chad"},
        {"name":"Ashley"}
    ]
};

let template = [
    {"<>":"h1","text":"${title}"},
    {"<>":"ul","html":[
        {"<>":"li","{}":o=>o.users,"text":"${name}"}
    ]}
];

document.write( json2html.render(state,template) );
```

--------------------------------

### Map State to Repeated Elements with {} Attribute

Source: https://www.json2html.com/blocks

The '{}' attribute is crucial for mapping parts of the state, especially arrays, to a group of HTML elements. This can result in the block being replicated for each item in the array.

```javascript
let template = [

    {"<>":"h1","text":"${title}"},

    {"{} ":o=>o.products,"html":[
        {"<>":"h2":"${name}"},
        {"<>":"p","${desc}"}
    ]}
];

let state = [
    "title":"Product Catalog",
    "products":[
        {"name":"Crackers","desc":"Crunchy crackers that everyone likes."},
        {"name":"Cookies","desc":"Mouth watering cookies."},
    ]
];

let rendered = json2html.render(state,template);
```

--------------------------------

### Group HTML Elements with Html Attribute

Source: https://www.json2html.com/blocks

Use the 'html' attribute with an array of templates to group multiple HTML elements together. This is useful for creating complex structures.

```javascript
{"html":[
    {"<>":"span","text":"Crackers"},
    {"<>":"strong","text":"$14.99"}
]}
```

--------------------------------

### Map State to Component with {} Attribute

Source: https://www.json2html.com/components

The {} attribute maps part of the state to a component. It can handle arrays, repeating the component for each element.

```javascript
json2html.components.add("user/list/item",{"<>":"li","text":"${name}"});

let template = [

    {"<>":"h1","text":"${title}"},

    {"<>":"ul","html":[
        {"[]":"user/list/item","{}":o=>o.users}
    ]}
];

let state = {
    "title":"User List",
    "users":[
        {"name":"Chad"},
        {"name":"Ashley"}
    ]
};

document.write( json2html.render(state,template) );
```

--------------------------------

### Wrap Component with html Attribute

Source: https://www.json2html.com/components

The html attribute allows wrapping a component around another template. The fourth parameter passed to the html attribute accesses the wrapped template.

```javascript
json2html.components.add("div/wraper",{"<>":"div","html":(o,i,p,h)=>h});

let template = [

    {"[]":"div/wrapper","html":[
        {"<>":"p","text":"Wrap this!"}
    ]}
    
];

document.write( json2html.render({},template) );
```

--------------------------------

### Render HTML with Html Attribute

Source: https://www.json2html.com/blocks

The 'html' attribute can render a literal HTML string, a JSON template, or an array of templates. For literal strings, using the 'text' attribute is generally safer to prevent XSS.

```javascript
{"html":"<span>hello</span>"}
```

--------------------------------

### Render HTML elements with attributes using json2html

Source: https://www.json2html.com/attributes

Non-reserved attributes in the json2html template are passed directly to the HTML element. Empty string attributes render without a value, ensuring correct HTML output for attributes like 'checked' or 'disabled'.

```javascript
{"<>":"select","id":"my-select","html":[
    {"<>":"option","value":"Canada","checked":""},
    {"<>":"option","value":"Mexico"}
]}
```

```html
<select id="my-select">
    <option checked>Canada</option>
    <option>Mexico</option>
</ul>
```

--------------------------------

### Basic JSON Template Structure

Source: https://www.json2html.com/core

Define the HTML hierarchy using a JSON object. This structure is used by json2html to render HTML.

```json
{"<>":"div","html":[
    {"<>":"p","text":"My first template"}
]}
```

--------------------------------

### Dynamically Specify Component Name with Inline Function

Source: https://www.json2html.com/components

Use a custom inline function with the [] attribute to dynamically change which component is used for rendering based on the object state.

```javascript
{"[]":o=>{
    if(o.manager) return("manager");
    else return("employee");
}}
```

--------------------------------

### Assign Select Element Value to State Variable

Source: https://www.json2html.com/inputs

Bind a select element's selected option to a state variable using the '>>' attribute. Ensure the initial state correctly reflects the default selected option. The 'onchange' event is triggered when a new option is selected.

```javascript
    let state = {
        "country":"Canada"
    };

    let template = [
        {"<>":"h1","text":"Country Selector"},

        {"<>":"select",">":"country","html":[
            {"<>":"option","value":"Canada","text":"Canada","selected":""},
            {"<>":"option","value":"Mexico","text":"Mexico"}
        ],"onchange":e=>{
            console.log("SELECTED",e.obj);
        }}
    ];

    document.querySelector("body").json2html(state,template);


```

--------------------------------

### Dynamic DOM Element with Inline Function

Source: https://www.json2html.com/attributes

Specify the DOM element dynamically using an inline function with the '<>' attribute. The function receives the object 'o' and should return the desired element tag name.

```javascript
{"<>":o=>{
    if(o.isParagraph) return("p");
    else return("span");
}}
```

--------------------------------

### Map State to Template Literal

Source: https://www.json2html.com/assignment

Use a template literal with ${stateName} to map state data to your template. Access nested elements using dot notation.

```javascript
let template = {"<>" :"span", "text":"Hello ${name}"};

let state = {"name":"Chad"};

document.write( json2html.render(state,template) );
```

--------------------------------

### Assign Input Value to State Variable

Source: https://www.json2html.com/inputs

Use the '>>' attribute to specify the state variable to update when an input element's value changes. The 'onchange' event handler can also be used to perform actions with the updated state.

```javascript
    let state = {
        "user":{
            "name":"Chad"
        }
    };

    let template = [
        {"<>":"h1","text":"User Details"},

        {"<>":"div","html":[
            {"<>":"input","type":"text","value":"${user.name}",">>":"user.name","onchange":e=>{
                console.log("User",e.obj.user);
            }}
        ]}
    ];

    document.querySelector("body").json2html(state,template);


```

--------------------------------

### Assign Reference Name with '#' Attribute

Source: https://www.json2html.com/attributes

Use the '#' attribute to assign a reference name to a DOM element. This is supported only for DOM elements and is used for refreshing parts of a template.

```json
{"<>":"div","#":"myDiv"}
```

--------------------------------

### Attach Event Listeners with on* Attributes

Source: https://www.json2html.com/attributes

Use on* attributes (e.g., 'onclick', 'onblur') to attach event listeners to DOM elements. The inline function receives an event object with 'obj' (data state) and 'props' (component properties).

```javascript
{"<>":"button","text":"Click Me","onclick":e=>{
    //e.obj : data state
    //e.props : component properties (if applicable)

    alert("You clicked me");
}}
```

--------------------------------

### Interactivity with Embedded Events

Source: https://www.json2html.com/core

Add event listeners directly within templates using inline functions. These functions can modify the data state, enabling dynamic updates.

```javascript
let users = [
    {"name":"Chad","removed":true},
    {"name":"Alex","removed":false}
];

let template = {"<>":"p","onclick":e=>{

    //Toggle the user as removed
    e.obj.removed = true;

    alert(`User ${e.obj.name} Removed`);
},"text":"${name}"};

document.querySelector("body").json2html(users,template);
```

--------------------------------

### Assigning a Literal ID for Refreshing

Source: https://www.json2html.com/refresh

Use the '#' attribute with a literal string, potentially including template literals, to assign a global ID for element refreshing. Ensure IDs are namespaced to avoid conflicts.

```javascript
{"<>":"li","#":"user-${id}","{}":o=>o.users,"html":[
    {"<>":"span","text":"${name}"}
]}
```

--------------------------------

### Assigning a Function ID for Refreshing

Source: https://www.json2html.com/refresh

Use the '#' attribute with a function to dynamically generate a global ID for element refreshing. This is useful when the ID depends on the data object.

```javascript
{"<>":"li","#":o=>{
    return("user-" + o.id);
},"{}":o=>o.users,"html":[
    {"<>":"span","text":"${name}"}
]}
```

--------------------------------

### Set Inner HTML with 'html' Attribute

Source: https://www.json2html.com/attributes

Use the 'html' attribute to set the inner HTML of a DOM element. It can be a string, an array of DOM elements, or an inline function returning HTML.

```json
{"<>":"div","html":"<span>hello</span>"}
```

```json
{"<>":"div","html":[
    {"<>":"span","text":"hello"}
]}
```

```json
{"<>":"div","html":o=>{
    return("hello");
}}
```

--------------------------------

### Special Logic with Inline Functions

Source: https://www.json2html.com/core

Incorporate inline JavaScript functions within templates for conditional logic or dynamic attribute generation. The function receives the data object as an argument.

```javascript
let users = [
    {"name":"Chad","removed":true},
    {"name":"Alex","removed":false}
];

let template = {"<>":"p","class":o=>{
    if(o.removed) return("red");
},"text":"${name}"};

document.write( json2html.render(users,template) );
```

--------------------------------

### Set Inner Text with 'text' Attribute

Source: https://www.json2html.com/attributes

Use the 'text' attribute to set the inner text of a DOM element. Special HTML characters are encoded. It accepts a string literal or a function returning a string.

```json
{"<>":"div","text":"<span>hello</span>"}
```

```json
{"<>":"div","html":[
    {"<>":"span","text":o=>{
        return("hello");
    }}
]}
```

--------------------------------

### Conditional Element Type with Inline Function

Source: https://www.json2html.com/assignment

Use an inline function within the '<>' property to dynamically determine the HTML tag based on state properties.

```javascript
{"<>" :o=>{
    if(o.isParagraph) return("p");
    else return("span");
}}
```
Tokens:
Raw