Skip to content

Simple and easy to use plugin to convert Json to Html code

Notifications You must be signed in to change notification settings

vinodselvin/JSON-to-HTML-Converter

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

15 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

JSON-to-HTML-Converter,

In this Version It Can convert any Html elements, as it was a limitation in previous version, And also a slight change in Json Format.

Buy Me A Coffee

Syntax

[
   {
      "tag":"tag_name",
      "html":"Text To put inside Elements"
      "_child":[
         {
            "tag":"child_tag_name",
            "html":"Html text of Child Element",
            "_child"[{...//And it is Recursive}]
         }
        ]
   }
]

How To use

var data_input = [
   {
      "tag":"h3",
      "id":"table-head",
      "class":"table-head",
      "html":"Top 3 Coders in India"
   },
   {
      "tag":"table",
      "id":"sample-table",
      "class":"table-class",
      "border":"1",
      "_child":[
         {
            "tag":"tr",
            "_child":[
                {
                   "tag":"th",
                   "html":"Rank"
                },
                {
                   "tag":"th",
                   "html":"Full Name"
                },
                {
                   "tag":"th",
                   "html":"City"
                }
            ]
         },
         {
            "tag":"tr",
            "_child":[
                {
                   "tag":"td",
                   "html":"1"
                },
                {
                   "tag":"td",
                   "html":"Vinod Selvin"
                },
                {
                   "tag":"td",
                   "html":"Mumbai"
                }
            ]
         },
         {
            "tag":"tr",
            "_child":[
                {
                   "tag":"td",
                   "html":"2"
                },
                {
                   "tag":"td",
                   "html":"Manoj Selvin"
                },
                {
                   "tag":"td",
                   "html":"Bangalore"
                }
            ]
         },
         {
            "tag":"tr",
            "_child":[
                {
                   "tag":"td",
                   "html":"3"
                },
                {
                   "tag":"td",
                   "html":"Binson Selvin"
                },
                {
                   "tag":"td",
                   "html":"Tirunelveli"
                }
            ]
         },
      ]
   }
];

Expected Datatype is String i.e. "Json String", To Convert to Json String use below code.

data_input = JSON.stringify(data_input);

How To Set Json String

json2Html('mypage').setJson(data_input);

How To Get converted Html

json2Html('mypage').getHtml(function (html) {
    document.write(html);
});

Output as Expected

<h3 id="table-head" class="table-head">Top 3 Coders in India</h3>
<table id="sample-table" class="table-class" border="1">
   <tbody>
      <tr>
         <th>Rank</th>
         <th>Full Name</th>
         <th>City</th>
      </tr>
      <tr>
         <td>1</td>
         <td>Vinod Selvin</td>
         <td>Mumbai</td>
      </tr>
      <tr>
         <td>2</td>
         <td>Manoj Selvin</td>
         <td>Bangalore</td>
      </tr>
      <tr>
         <td>3</td>
         <td>Binson Selvin</td>
         <td>Tirunelveli</td>
      </tr>
   </tbody>
</table>

Look into sample.html file for complete Example.

Buy Me A Coffee

About

Simple and easy to use plugin to convert Json to Html code

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published