sjt

simple-json-to-html-converter

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

Showing:

Popularity

Downloads/wk

1

GitHub Stars

3

Maintenance

Last Commit

2yrs ago

Contributors

1

Package

Dependencies

0

Size (min+gzip)

0.5KB

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

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

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100