Post
Ask Question

Convert JSON Data into HTML

First Of All to Create the HTML table using Json there are easy task to do it.

Let's Start

You can add below code in your html file:
  1. <div class="container">    
  2.     <p>    
  3.         <table id="placar" class="table table-condensed  table-bordered">    
  4.             <thead>    
  5.                 <tr>    
  6.                     <th>#</th>    
  7.                     <th>Name</th>    
  8.                     <th>K</th>    
  9.                     <th>D</th>    
  10.                     <th>Point</th>    
  11.                 </tr>    
  12.             </thead>    
  13.             <tbody></tbody>    
  14.         </table>    
  15. </div>  
Now as JSON for that Add below code in the JavaScript file:
  1. var data = [{    
  2.     'order': '1',    
  3.         'name': 'Harshad',    
  4.         'k': '3',    
  5.         'd': '0',    
  6.         'score': '121',    
  7.         'id': '540'    
  8. }, {    
  9.     'order': '2',    
  10.         'name': 'Rajesh',    
  11.         'k': '15',    
  12.         'd': '3',    
  13.         'score': '122',    
  14.         'id': '541'    
  15. }, {    
  16.     'order': '3',    
  17.         'name': 'Bingo',    
  18.         'k': '0',    
  19.         'd': '23',    
  20.         'score': '123',    
  21.         'id': '542'    
  22. }];    
  23.     
  24. var currentID = 541;    
  25.     
  26. var transform = {    
  27.     tag: 'tr',    
  28.     children: [{    
  29.         "tag": "td",    
  30.             "html": "${order}"    
  31.     }, {    
  32.         "tag": "td",    
  33.             "html": "${name}"    
  34.     }, {    
  35.         "tag": "td",    
  36.             "html": "${k}"    
  37.     }, {    
  38.         "tag": "td",    
  39.             "html": "${d}"    
  40.     }, {    
  41.         "tag": "td",    
  42.             "html": "${score}"    
  43.     }]    
  44. };    
  45.     
  46. $('#placar > tbody ').json2html(data, transform);    
If you do the upar thing ur output is below: