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