JSFiddle - React, Tailwind, and code Playground
HTML
<table>
<tr>
<th>PRODUCT</th>
<th>RATE</th>
<th>APR*</th>
<th>POINTS</th>
</tr>
</table>
JavaScript
$(document).ready(function () {
var json = [{
"RATE_UPLOAD_DATE": "07/01/2015 8:17 AM CT",
"GROUPS": [
{
"NAME": "Conforming Fixed Rate Mortgage Purchase",
"PRODUCT": [
{
"DESCR": "30 Year Fixed Rate",
"RATE": "4.25",
"APR": "4.277",
"POINTS": "0",
"<PAYMENT_STREAM_URL>": "https://publicservices.mortgagewebcenter.com/PaymentStream.aspx?CobranderId=1152&CriteriaId=113444902&ResultId=58"
},
{
"DESCR": "20 Year Fixed Rate",
"RATE": "4.125",
"APR": "4.162",
"POINTS": "0",
"<PAYMENT_STREAM_URL>": "https://publicservices.mortgagewebcenter.com/PaymentStream.aspx?CobranderId=1152&CriteriaId=113444902&ResultId=52"
},
{
"DESCR": "15 Year Fixed Rate",
"RATE": "3.375",
"APR": "3.422",
"POINTS": "0",
"<PAYMENT_STREAM_URL>": "https://publicservices.mortgagewebcenter.com/PaymentStream.aspx?CobranderId=1152&CriteriaId=113444902&ResultId=45"
}
]
},
{
"NAME": "Conforming Adjustable Rate Mortgage Purchase",
"PRODUCT": [
{
"DESCR": "3/1 Fully Amortizing ARM",
"RATE": "3.625",
"APR": "3.166",
"POINTS": "0",
"<PAYMENT_STREAM_URL>": "https://publicservices.mortgagewebcenter.com/PaymentStream.aspx?CobranderId=1152&CriteriaId=113444913&ResultId=27"
},
{
"DESCR": "5/1 Fully Amortizing ARM",
"RATE": "3.25",
"APR": "3.113",
"POINTS": "0",
"<PAYMENT_STREAM_URL>": "https://publicservices.mortgagewebcenter.com/PaymentStream.aspx?CobranderId=1152&CriteriaId=113444913&ResultId=13"
},
...