Package Exports

o_json_to_html
o_json_to_html/o_json_to_html.module.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (o_json_to_html) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

usage

import

import O_json_to_html from "o_json_to_html"
o_json_to_html = new O_json_to_html()

json to html

t => "tagName"

var o_html_element = o_json_to_html.f_json_to_html(`
{
    "t": "h1",
    "s_inner_text": "Super cool!"
}
`)

<h1>Super cool!<h1>

c => "children"

var o_html_element = o_json_to_html.f_json_to_html(`
{
    "t": "div",
    "c": [
        {
            "t": "h1",
            "s_inner_text": "What?"
        }, 
        {
            "t": "p",
            "s_inner_text": "yes, this is awesome"
        }
    ]
}
`)

<div>
    <h1>What?</h1>
    <p>yes, this is awesome</p>
</div>

default tagName is 'div', so "s_t" can be omitted

var o_html_element = o_json_to_html.f_json_to_html(`
    {
        "s_inner_text": "hello",
    }, 
    {
        "s_inner_text": "world",
    }
`)

<div>hello</div>
<div>world</div>

custom html tagName and attributes

var o_html_element = o_json_to_html.f_json_to_html(`
{
    "t": "special_element",
    "special_attribute" : "great"
}
`)

<special_element special_attribute="great"></special_element>

customization / settings

custom property names

original html property	object property	class property
`.tagName`	`s_t`	`.s_prop_name_tag_name`
`childNodes`	`a_c`	`.s_prop_name_children_elements`
`innerHTML`	`s_inner_html`	`.s_prop_name_inner_html`
`innerText`	`s_inner_text`	`.s_prop_name_inner_text`

example

//... 
o_json_to_html.s_prop_name_tag_name = "lol"
var o_html_element = o_json_to_html.f_json_to_html(`
{
    "lol": "table",
}
`)

<table></table>

javascript object to html

advantages :

comments are allowed
functions can be used
property names do not always require start and ending quotes

example

var o_html_element = o_json_to_html.f_javascript_object_to_html(
{
    // t: "table" // comments are allowed
    t: "div", // we dont need quotes '" on the property name
    "data-quotes-needed": "quotes required because property name contains dash (-)"
    "onclick" : function(event){
        alert("you clicked on a "+event.target.tagName)
    }
}
)

javascript object to html

var object = o_json_to_html.f_javascript_object_to_html(document.querySelector("body"))

pass data object to function

documentation coming soon


# version log

## 1.0.4
### data object support
you can now link data properties with `propname_on_html_element<>`:`propname_on_data_element`


### console.error 
linking non exsiting properties will call a console.error, for example `property o_mouse.o_position.n_x does not exist in object`

## 1.0.5
readme improvements 

## 1.0.6 
- changed many property names
- a data object can be passed , documentation coming soon