JSFiddle - React, Tailwind, and code Playground
by grant
HTML
<div id="demo">
</div>
<div id="selway">
</div>
<table id="product">
<th>Products</th>
<tbody></tbody>
</table>
JavaScript
var response = {
"selway" : [{
"feet": 1,
"paradise_cfs": "860",
"lowell_cfs": "1000",
"rating": "III-IV"
},
{
"feet": 2,
"paradise_cfs": "1,140",
"lowell_cfs": "5000",
"rating": "III-IV"
}
]
};
var feet = {
"1" : "1,000",
"2" : "5,000",
"3" : "8,750",
"4" : "12,500",
"5" : "16,300",
"6" : "20,300",
"7" : "24,250",
"8" : "28,000"
}
const foo = {bar: {baz: 42}};
console.log(response.selway[0]); // undefined
var product_catalog = {
"products": {
"laptop": [{
"brand": "sony",
"price": "$1000"
}, {
"brand": "acer",
"price": "$400"
}],
"cellphone": [{
"brand": "iphone",
"price": "$800"
}, {
"brand": "htc",
"price": "$500"
}],
"tablets": [{
"brand": "iPad",
"price": "$800"
}, {
"brand": "htc-tab",
"price": "$500"
}]
}
};
var output = document.querySelector('#product tbody');
function build(JSONObject) {
/**get all keys***/
var keys = Object.keys(JSONObject);
/**get all subkeys***/
var subkeys = Object.keys(JSONObject[keys]);
console.log(subkeys);
/**loop sub keys to build HTML***/
for (var i = 0, tr, td; i < subkeys.length; i++) {
tr = document.createElement('tr');
td = document.createElement('td');
td.appendChild(document.createTextNode(subkeys[i]));
tr.appendChild(td);
output.appendChild(tr);
}
}
build(product_catalog);