A php class to convert json objects to html.
Include or require the file. Ensure The HtmlElement class is in the same directory.
include("JsonToHtml.php");
Create a JsonToHtml object and read in a JSON file. Pass the file name to the function.
$jhtml = new JsonToHtml();
$htmlOutput = $jhtml->readFile("data.json");
echo $htmlOutput;
// shortcut
$jhtml = new JsonToHtml("data.json");
echo $jhtml->getOutput();
You can pass the name of your html file.
$jhtml = new JsonToHtml();
$jhtml->readFile("data.json");
$jhtml->writeToFile($filename);
Method | Description |
---|---|
readFile("filename") | Read a file and attempts to convert it to html. |
writeToFile("filename") | Write output of readfile function to a given file. |
getOutput() | Gets the html output of the conversion. |
The HTMLElement class stores the html element attributes and features prior to generation. You could use this to create html tags.
$element = new HtmlElement();
$element->create("h1");
$element->setId("my-element");
$element->addGeneralAttributes("data-file","file.json");
$element->addContent("Hello World");
echo $element->getHtml(); // <h1 id="my-element" data-file="file.json">Hello World</h1>
The HtmlElement has true child elements that is used to recursive produce html. However this can be mimic for simplicity.
// Create first html element
$element = new HtmlElement();
$element->create("div");
// Create second html element
$element2 = new HtmlElement();
$element2->create("p");
$element2->addContent("This is a hello world");
$element->addContent($element2->createHtml());
echo $element->getHtml(); // <div><p>This is a hello world</p></div>
You can create child elements and add them to parent elements. You can then loop through all the child elements and them to your parent element.
// create div
$element = new HtmlElement();
$element->create("div");
// create h1 element using constructor
$element2 = new HtmlElemenet("h1");
$element2->addContent("This is a header");
// create p element
$element3 = new HtmlElement();
$element3->create("p");
$element3->addContent("This is a hello world");
// add children to div
$element->addChild($element2);
$element->addChild($element3);
// Create Parent Div
foreach($element->getChildren() as $child){
$element->addContent($child->getHtml()); // add child html to parent
}
echo $element->getHtml(); // get div with child elements html
Using this json parser you can create duplication objects which makes it easy to create a html document from you JSON file.
IMPORTANT! - For styling of elements there is a conflict with the style attribute and the style xml element. Instead use the inline attribute for styling of elements. In the below examples you can see the inline attribute being used.
{
"html": {
"div": {
"h3": "List elements",
"inline": "padding:5px;",
"ul": {
"li": "First List",
"li": "Second list"
},
}
}
}
{
"html": {
"div": {
"h3": "Form Elements Section",
"p": "This is my first form",
"form": {
"inline": "border: 1px solid #ccc; padding: 5px;",
"label": {
"text": "A Input",
"inline": "display:block; margin-right:3px;"
},
"input": {
"inline": "display:block",
"type": "text",
"placeholder": "My first input",
"value": ""
},
"select": {
"inline": "display:block",
"option": "First Item",
"option": "Second Item"
},
"textarea": {
"text": "This is a a text area",
"cols": "25",
"inline": "display:block"
}
}
},
}
}
A list of tested html elements. All elements should work. Some are special like br and hr and require special formating.
-
html
-
h1 - h6
-
head [ title, meta, link, style ]
-
body, footer, header
-
p, span
-
br, hr - special
-
form [ label, input, textarea, select ]
-
table [ tr, td, th ]
-
ul, ol, li