Populate a table where each component of JSON corresponds each table row

Long ago, I wanted to populate a table where each component of JSON corresponds each table row and here is the solution:

var json = {
 "component0": {
 "top": "99",
 "bottom": "14",
 "surcharge": "11"
 },
 "component3": {
 "top": "99",
 "bottom": "14",
 "surcharge": "11"
 },
 "component4": {
 "top": "99",
 "bottom": "14",
 "surcharge": "11"
 },
 "component1": {
 "top": "99",
 "bottom": "14",
 "surcharge": "11"
 },
 "component2": {
 "top": "99",
 "bottom": "14",
 "surcharge": "11"
 },
 "component7": {
 "top": "99",
 "bottom": "14",
 "surcharge": "11"
 },
 "component5": {
 "top": "99",
 "bottom": "14",
 "surcharge": "11"
 },
 "component6": {
 "top": "99",
 "bottom": "14",
 "surcharge": "11"
 }
}

$(document).ready(function() {
 for(j in json) {
 var t = json[j].top;
 var b = json[j].bottom;
 var s = json[j].surcharge;
 $("#mytable").append("<tr><td>" + t + "</td><td>" + b + "</td><td>" + s + "</td></tr>");
 }
})