create table dynamically

by Canet Robern

HTML

<table>
	<thead>
		<tr>
			<th>date</th>
			<th>price</th>
		</tr>
	</thead>
	<tbody id="tableBody">
	</tbody>
</table>

CSS

th, td {
	width : 100px;
	padding : 5px;
	border : 1px solid #aaaaaa;
	text-align: center;
}

JavaScript

var objFromHttp = {
	"extrabed_cost": 600,
	"grand_total": "24982.86",
	"price_breakup": {
		"2017 - 10 - 23": 2599,
		"2017 - 10 - 25": 2599,
		"2017 - 10 - 24": 2599,
		"2017 - 10 - 27": 2599,
		"2017 - 10 - 26": 2599
	},
	"room_cost": 2299,
	"status": "POST",
	"tax_percent": 19,
	"total": 20994,
	"total_days": 8,
	"total_tax": "3988.86"
};

var tableBody = document.getElementById('tableBody');

for(var i=0 ; i<Object.keys(objFromHttp.price_breakup).length ; i++ ){
	var date = Object.keys(objFromHttp.price_breakup)[i];
	var price = Object.values(objFromHttp.price_breakup)[i];
	console.log(date, price);
	
	var tr = document.createElement('tr');   

    var dateTd = document.createElement('td');
    var priceTd = document.createElement('td');

    var dateTxt = document.createTextNode(date);
    var priceTxt = document.createTextNode(price);

    dateTd.appendChild(dateTxt);
    priceTd.appendChild(priceTxt);
    tr.appendChild(dateTd);
    tr.appendChild(priceTd);

    tableBody.appendChild(tr);
}