asked on

Convert Json file HTML report

I am working on showing the .json format to be rendered as HTML. I have attached the json file i am using. I need some HTML converter to show the entire .json file in a report format in HTML.

so for example in the attached .json should be rendered as HTML report
a) The title of the HTML report would be the 'Contractor name' i.e. 'Sample Contractor'
b) The body of the HTML Report should : list the values in the tag 'phone number', 'Environmental concerns', 'Weather _conditions' etc.
c) The body of the HTML Report should also : Show the image under the 'attachment' tag
d) The footer of the HTML should: list the values in the 'Inspector_name'

Nitin Sontakke

There is no attachment. Furthermore, it typically helps if you create a mock-up either in MS-Excel or MS-Word or anything which will give a visual representation (if you can, of course!).

Vijaya Kumar

Try this sample code, change dataJSON based on your requirement.

<html>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<head>
</head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css">		
<link rel="stylesheet" href="//cdn.datatables.net/plug-ins/1.10.16/features/searchHighlight/dataTables.searchHighlight.css">		
<link rel="stylesheet" href="https://cdn.datatables.net/responsive/1.0.7/css/responsive.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.3.1/css/buttons.dataTables.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script type="text/javascript" src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/responsive/1.0.7/js/dataTables.responsive.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.3.1/js/dataTables.buttons.min.js"></script>
<script src="https://bartaz.github.io/sandbox.js/jquery.highlight.js"></script>	
<script src="https://cdn.datatables.net/plug-ins/1.10.16/features/searchHighlight/dataTables.searchHighlight.min.js"></script>	
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.27/build/pdfmake.min.js"></script>
<script src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.27/build/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/1.3.1/js/buttons.html5.min.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
	var dataJSON = [{"c_name":"abc","ph_no":"5755","weather":"cloudy"},
					{"c_name":"xyx","ph_no":"123456","weather":"cloudy"},
					{"c_name":"abgfhc","ph_no":"x545yz","weather":"cloudy"},
					{"c_name":"gfhh","ph_no":"xy4545z","weather":"cloudy"},
					{"c_name":"afghfghbc","ph_no":"45454","weather":"cloudy"}];
    $('#sample').DataTable( {
        dom: 'Bfrtip',
		"aaData": dataJSON,
		"aoColumns": [
					{ "mDataProp": "c_name" },
					{ "mDataProp": "ph_no" },
					{ "mDataProp": "weather" },
					],
            buttons: [
            {
                extend: 'excelHtml5',
                title: 'Report',
				
			},
            {
                extend: 'pdfHtml5',
                title: 'Report',
				
			},
			]
    } );
} );
</script>
</head>
<body>
<table id="sample">
	<thead>
  <tr>
    <th>Contractor name</th>
    <th>Phone number</th>
    <th>Weather _conditions</th>
  </tr>
  </thead>

</table>
</body>
</html>

Open in new window

Star79

ASKER

This is something I am looking for @vijaya kumar. The HTML looks good but the only issue is Json structure what I have very unstructured. See the attached but regardless I work on tweaking the HTML. Will keep you posted....
forms.txt

ASKER CERTIFIED SOLUTION

Vijaya Kumar

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Star79

ASKER

I think your answer should suffice. Thanks a lot.

Star79

ASKER

worked like a charm. Thanks.