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(`
{
    "s_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(`
{
    "s_t": "div",
    "a_c": [
        {
            "s_t": "h1",
            "s_inner_text": "What?"
        }, 
        {
            "s_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(`
{
    "s_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
    s_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

1.0.7

changed documentaiton errors

1.0.8

renamed most of the functions, the old names are still available and should not cause any problems but throw a console.warn

s_fname_old	s_fname_new
`f_javascript_object_to_html`	`f_o_javascript_object_to_html`
`f_json_or_jsobject_to_html`	`f_o_json_or_jsobject_to_html`
`f_json_to_html`	`f_o_json_to_html`
`f_convert_string_to_javascript_object`	`f_o_convert_string_to_javascript_object`
`f_html_to_object`	`f_o_html_to_object`
`f_html_to_json`	`f_s_html_to_json`

added the initial assignment of the linked properties, so that the linked properties on the o_html_element instance has an inital value