Question 6 Parse JSON and Display

Parse JSON and create a table. Include button that rotates the column headers.

by cassfinn

HTML

<button>
Show Vertical Column Headings
</button>
<p>
<table id="rotate-table-headers">
  <tr>
    <th colspan=3></th>
    <th colspan=3>Details</th>
  </tr>
  <tr>
    <th><div>ID</div></th>
    <th><div>Name</div></th>
    <th><div>Category</div></th>
    <th><div>Price</div></th>
    <th><div>Page Count</div></th>
    <th><div>Paper Type</div></th>
  </tr>
</table>

CSS

body {
  background: #fefefe;
  padding: 16px;
  font-family: Helvetica;
}

table {
  padding: 0px;
  border: 1px solid gray;
  background-color: #ccc;
}

td {
  text-align: left;
  padding: 8px;
  border: 1px;
  background-color: #fff;
}

th {
  text-align: left;
  padding: 8px;
  background-color: #ccc;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

table.rotate-table-grid {
  box-sizing: border-box;
  border-collapse: collapse;
}
.rotate-table-grid tr, .rotate-table-grid td, .rotate-table-grid th {
  border: 1px solid #ddd;
  position: relative;
  padding: 10px;
}
.rotate-table-grid th div {
  transform-origin: 0 50%;
  transform: rotate(-90deg); 
  white-space: nowrap; 
  display: block;
  position: absolute;
  bottom: 0;
  left: 50%;
}

JavaScript

var buttonRotate = $("button")

buttonRotate.on("click", function(){
	$('#rotate-table-headers').addClass('rotate-table-grid th div');
	document.getElementsByTagName("TR")[1].style.height = '120px';
});

$(document).ready(function() {

// create table with valid json
 var json = [{
		"ID": "101",
		"Name": "The Good Parts ",
		"Category": "JS",
		"Detail": {
			"Price": "100$",
			"Page Count": "200",
			"Paper Type": "Wax paper"
		}
	},
	{
		"ID": "102",
		"Name": "The Definitive Guide ",
		"Category": "JavaScript",
		"Detail": {
			"Price": "70$",
			"Page Count": "200",
			"Paper Type": "Leather paper"
		}
	},
	{
		"ID": "103",
		"Name": "CoffeeScript ",
		"Category": "Scripting",
		"Detail": {
			"Price": "90$",
			"Page Count": "200",
			"Paper Type": "Kraft paper"
		}
	},
	{
		"ID": "104",
		"Name": "Exploring ES6 ",
		"Category": "Browser",
		"Detail": {
			"Price": "40$",
			"Page Count": "200",
			"Paper Type": "Book paper"
		}
	}];
  
  for (var i = 0; i < json.length; i++) {
		var tr = $('<tr/>');
    tr.append("<td>" + json[i].ID + "</td>");
    tr.append("<td>" + json[i].Name + "</td>");
    tr.append("<td>" + json[i].Category + "</td>");
    tr.append("<td>" + json[i].Detail.Price + "</td>")
    tr.append("<td>" + json[i].Detail['Page Count'] + "</td>")
    tr.append("<td>" + json[i].Detail['Paper Type'] + "</td>")
    $('table').append(tr);
  }
  
});