{"id":16314524,"url":"https://github.com/wyntonfranklin/jsontohtml","last_synced_at":"2025-04-27T22:50:26.385Z","repository":{"id":113780473,"uuid":"162729428","full_name":"wyntonfranklin/jsontohtml","owner":"wyntonfranklin","description":"A php class to convert json objects to html","archived":false,"fork":false,"pushed_at":"2018-12-25T19:58:50.000Z","size":24,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-02-16T16:36:41.912Z","etag":null,"topics":["html-generation","json-parser","php"],"latest_commit_sha":null,"homepage":"http://www.igestdevelopment.com/jhtml/","language":"PHP","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/wyntonfranklin.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-12-21T15:27:32.000Z","updated_at":"2021-08-06T01:30:34.000Z","dependencies_parsed_at":null,"dependency_job_id":"399d59e5-eec2-443c-8b20-bff402c73a62","html_url":"https://github.com/wyntonfranklin/jsontohtml","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wyntonfranklin%2Fjsontohtml","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wyntonfranklin%2Fjsontohtml/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wyntonfranklin%2Fjsontohtml/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wyntonfranklin%2Fjsontohtml/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wyntonfranklin","download_url":"https://codeload.github.com/wyntonfranklin/jsontohtml/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251052263,"owners_count":21528797,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["html-generation","json-parser","php"],"created_at":"2024-10-10T21:54:09.288Z","updated_at":"2025-04-26T21:01:17.425Z","avatar_url":"https://github.com/wyntonfranklin.png","language":"PHP","funding_links":[],"categories":[],"sub_categories":[],"readme":"# jsontohtml\nA php class to convert json objects to html.\n\n\n\n### Usage\n\nInclude or require the file. Ensure The HtmlElement class is in the same directory.\n\n```php\ninclude(\"JsonToHtml.php\");\n```\n\n\n\n### Creating HTML from a JSON file.\n\nCreate a JsonToHtml object and read in a JSON file. Pass the file name to the function.\n\n```php\n$jhtml = new JsonToHtml();\n$htmlOutput = $jhtml-\u003ereadFile(\"data.json\");\necho $htmlOutput;\n\n// shortcut \n$jhtml = new JsonToHtml(\"data.json\");\necho $jhtml-\u003egetOutput();\n```\n\n\n\n### Write HTML To File.\n\nYou can pass the name of your html file.\n\n```php\n$jhtml = new JsonToHtml();\n$jhtml-\u003ereadFile(\"data.json\");\n$jhtml-\u003ewriteToFile($filename);\n```\n\n\n\n### Public Methods\n\n| Method                  | Description                                        |\n| ----------------------- | -------------------------------------------------- |\n| readFile(\"filename\")    | Read a file and attempts to convert it to html.    |\n| writeToFile(\"filename\") | Write output of readfile function to a given file. |\n| getOutput()             | Gets the html output of the conversion.            |\n\n\n\n### The HTMLElement\n\nThe HTMLElement class  stores the html element attributes and features prior to generation. You could use this to create html tags.\n\n\n\n### Create HTMLElement\n\n```php\n$element = new HtmlElement();\n$element-\u003ecreate(\"h1\");\n$element-\u003esetId(\"my-element\");\n$element-\u003eaddGeneralAttributes(\"data-file\",\"file.json\");\n$element-\u003eaddContent(\"Hello World\");\necho $element-\u003egetHtml(); // \u003ch1 id=\"my-element\" data-file=\"file.json\"\u003eHello World\u003c/h1\u003e\n```\n\n\n\n### Create Psudo Child Elements\n\nThe HtmlElement has true child elements that is used to recursive produce html. However this can be mimic for simplicity.\n\n```php\n// Create first html element\n$element = new HtmlElement();\n$element-\u003ecreate(\"div\");\n\n// Create second html element\n\n$element2 = new HtmlElement();\n$element2-\u003ecreate(\"p\");\n$element2-\u003eaddContent(\"This is a hello world\");\n$element-\u003eaddContent($element2-\u003ecreateHtml());\necho $element-\u003egetHtml(); // \u003cdiv\u003e\u003cp\u003eThis is a hello world\u003c/p\u003e\u003c/div\u003e \n```\n\n\n\n### Create Children Elements\n\nYou 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.\n\n```php\n// create div\n$element = new HtmlElement();\n$element-\u003ecreate(\"div\");\n\n// create h1 element using constructor\n$element2 = new HtmlElemenet(\"h1\");\n$element2-\u003eaddContent(\"This is a header\");\n\n// create p element\n$element3 = new HtmlElement();\n$element3-\u003ecreate(\"p\");\n$element3-\u003eaddContent(\"This is a hello world\");\n\n// add children to div\n$element-\u003eaddChild($element2);\n$element-\u003eaddChild($element3);\n\n// Create Parent Div\nforeach($element-\u003egetChildren() as $child){\n    $element-\u003eaddContent($child-\u003egetHtml()); // add child html to parent\n}\n\necho $element-\u003egetHtml(); // get div with child elements html\n```\n\n\n\n### JSON Object File\n\nUsing this json parser you can create duplication objects which makes it easy to create a html document from you JSON file.\n\n**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.\n\n#### Creating a simple div with styling and list element.\n\n```json\n{\n  \"html\": {\n  \t\"div\": {\n        \"h3\": \"List elements\",\n        \"inline\": \"padding:5px;\",\n        \"ul\": {\n          \"li\": \"First List\",\n          \"li\": \"Second list\"\n        },\n   \t}     \n  }\n}\n```\n\n\n\n#### Create a form using JSONToHTML\n\n```json\n{\n  \"html\": {\n      \"div\": {\n        \"h3\": \"Form Elements Section\",\n        \"p\": \"This is my first form\",\n        \"form\": {\n          \"inline\": \"border: 1px solid #ccc; padding: 5px;\",\n          \"label\": {\n            \"text\": \"A Input\",\n            \"inline\": \"display:block; margin-right:3px;\"\n          },\n          \"input\": {\n            \"inline\": \"display:block\",\n            \"type\": \"text\",\n            \"placeholder\": \"My first input\",\n            \"value\": \"\"\n          },\n          \"select\": {\n            \"inline\": \"display:block\",\n            \"option\": \"First Item\",\n            \"option\": \"Second Item\"\n          },\n          \"textarea\": {\n            \"text\": \"This is a a text area\",\n            \"cols\": \"25\",\n            \"inline\": \"display:block\"\n          }\n        }\n      },   \n  }\n}\n```\n\n\n\n### Supported Elements\n\nA list of tested html elements. All elements should work. Some are special like br and hr and require special formating.\n\n- html\n\n- h1 - h6 \n\n- head [ title, meta, link, style ]\n\n- body, footer, header\n\n- p, span\n\n- br, hr - special\n\n- form [ label, input, textarea, select ]\n\n- table [ tr, td, th ]\n\n- ul, ol, li \n\n\n### Demo\n\nhttp://www.igestdevelopment.com/jhtml/","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwyntonfranklin%2Fjsontohtml","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwyntonfranklin%2Fjsontohtml","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwyntonfranklin%2Fjsontohtml/lists"}