Menu
I am using below code to parse a JSON file, but I am getting undefined in each table column.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(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"
},
{
"DESCR": "7/1 Fully Amortizing ARM",
"RATE": "3.5",
"APR": "3.258",
"POINTS": "0",
"<PAYMENT_STREAM_URL>": "https://publicservices.mortgagewebcenter.com/PaymentStream.aspx?CobranderId=1152&CriteriaId=113444913&ResultId=5"
},
{
"DESCR": "10/1 Fully Amortizing ARM",
"RATE": "3.75",
"APR": "3.487",
"POINTS": "0",
"<PAYMENT_STREAM_URL>": "https://publicservices.mortgagewebcenter.com/PaymentStream.aspx?CobranderId=1152&CriteriaId=113444913&ResultId=65"
}
]
},
{
"NAME": "Jumbo Fixed Rate Purchase",
"PRODUCT": [
{
"DESCR": "30 Year Fixed Rate",
"RATE": "4.25",
"APR": "4.265",
"POINTS": "0",
"<PAYMENT_STREAM_URL>": "https://publicservices.mortgagewebcenter.com/PaymentStream.aspx?CobranderId=1152&CriteriaId=113444921&ResultId=6"
},
{
"DESCR": "15 Year Fixed Rate",
"RATE": "3.5",
"APR": "3.526",
"POINTS": "0",
"<PAYMENT_STREAM_URL>": "https://publicservices.mortgagewebcenter.com/PaymentStream.aspx?CobranderId=1152&CriteriaId=113444921&ResultId=30"
}
]
},
{
"NAME": "Jumbo Adjustable Rate Mortgage Purchase",
"PRODUCT": [
{
"DESCR": "3/1 Fully Amortizing ARM",
"RATE": "2.75",
"APR": "2.959",
"POINTS": "0",
"<PAYMENT_STREAM_URL>": "https://publicservices.mortgagewebcenter.com/PaymentStream.aspx?CobranderId=1152&CriteriaId=113444935&ResultId=56"
},
{
"DESCR": "5/1 Fully Amortizing ARM",
"RATE": "3",
"APR": "3.014",
"POINTS": "0",
"<PAYMENT_STREAM_URL>": "https://publicservices.mortgagewebcenter.com/PaymentStream.aspx?CobranderId=1152&CriteriaId=113444935&ResultId=45"
},
{
"DESCR": "7/1 Fully Amortizing ARM",
"RATE": "3.25",
"APR": "3.13",
"POINTS": "0",
"<PAYMENT_STREAM_URL>": "https://publicservices.mortgagewebcenter.com/PaymentStream.aspx?CobranderId=1152&CriteriaId=113444935&ResultId=37"
},
{
"DESCR": "5/1 Interest Only ARM",
"RATE": "3.125",
"APR": "3.055",
"POINTS": "0",
"<PAYMENT_STREAM_URL>": "https://publicservices.mortgagewebcenter.com/PaymentStream.aspx?CobranderId=1152&CriteriaId=113444935&ResultId=13"
},
{
"DESCR": "10/1 Fully Amortizing ARM",
"RATE": "3.5",
"APR": "3.32",
"POINTS": "0",
"<PAYMENT_STREAM_URL>": "https://publicservices.mortgagewebcenter.com/PaymentStream.aspx?CobranderId=1152&CriteriaId=113444935&ResultId=22"
}
]
},
{
"NAME": "Conforming Fixed Rate Mortgage Refinance",
"PRODUCT": [
{
"DESCR": "30 Year Fixed Rate",
"RATE": "4.375",
"APR": "4.402",
"POINTS": "0",
"<PAYMENT_STREAM_URL>": "https://publicservices.mortgagewebcenter.com/PaymentStream.aspx?CobranderId=1152&CriteriaId=113444940&ResultId=62"
},
{
"DESCR": "20 Year Fixed Rate",
"RATE": "4.25",
"APR": "4.287",
"POINTS": "0",
"<PAYMENT_STREAM_URL>": "https://publicservices.mortgagewebcenter.com/PaymentStream.aspx?CobranderId=1152&CriteriaId=113444940&ResultId=55"
},
{
"DESCR": "15 Year Fixed Rate",
"RATE": "3.5",
"APR": "3.547",
"POINTS": "0",
"<PAYMENT_STREAM_URL>": "https://publicservices.mortgagewebcenter.com/PaymentStream.aspx?CobranderId=1152&CriteriaId=113444940&ResultId=47"
}
]
},
{
"NAME": "Conforming Adjustable Rate Mortgage Refinance",
"PRODUCT": [
{
"DESCR": "3/1 Fully Amortizing ARM",
"RATE": "3.75",
"APR": "3.194",
"POINTS": "0",
"<PAYMENT_STREAM_URL>": "https://publicservices.mortgagewebcenter.com/PaymentStream.aspx?CobranderId=1152&CriteriaId=113444949&ResultId=30"
},
{
"DESCR": "5/1 Fully Amortizing ARM",
"RATE": "3.375",
"APR": "3.157",
"POINTS": "0",
"<PAYMENT_STREAM_URL>": "https://publicservices.mortgagewebcenter.com/PaymentStream.aspx?CobranderId=1152&CriteriaId=113444949&ResultId=15"
},
{
"DESCR": "7/1 Fully Amortizing ARM",
"RATE": "3.625",
"APR": "3.317",
"POINTS": "0",
"<PAYMENT_STREAM_URL>": "https://publicservices.mortgagewebcenter.com/PaymentStream.aspx?CobranderId=1152&CriteriaId=113444949&ResultId=6"
},
{
"DESCR": "10/1 Fully Amortizing ARM",
"RATE": "3.875",
"APR": "3.566",
"POINTS": "0",
"<PAYMENT_STREAM_URL>": "https://publicservices.mortgagewebcenter.com/PaymentStream.aspx?CobranderId=1152&CriteriaId=113444949&ResultId=70"
}
]
},
{
"NAME": "Jumbo Fixed Rate Refinance",
"PRODUCT": [
{
"DESCR": "30 Year Fixed Rate",
"RATE": "4.375",
"APR": "4.39",
"POINTS": "0",
"<PAYMENT_STREAM_URL>": "https://publicservices.mortgagewebcenter.com/PaymentStream.aspx?CobranderId=1152&CriteriaId=113444962&ResultId=6"
},
{
"DESCR": "15 Year Fixed Rate",
"RATE": "3.625",
"APR": "3.651",
"POINTS": "0",
"<PAYMENT_STREAM_URL>": "https://publicservices.mortgagewebcenter.com/PaymentStream.aspx?CobranderId=1152&CriteriaId=113444962&ResultId=30"
}
]
},
{
"NAME": "Jumbo Adjustable Rate Mortgage Refinance",
"PRODUCT": [
{
"DESCR": "3/1 Fully Amortizing ARM",
"RATE": "2.875",
"APR": "2.986",
"POINTS": "0",
"<PAYMENT_STREAM_URL>": "https://publicservices.mortgagewebcenter.com/PaymentStream.aspx?CobranderId=1152&CriteriaId=113444969&ResultId=56"
},
{
"DESCR": "5/1 Fully Amortizing ARM",
"RATE": "3.125",
"APR": "3.058",
"POINTS": "0",
"<PAYMENT_STREAM_URL>": "https://publicservices.mortgagewebcenter.com/PaymentStream.aspx?CobranderId=1152&CriteriaId=113444969&ResultId=45"
},
{
"DESCR": "7/1 Fully Amortizing ARM",
"RATE": "3.375",
"APR": "3.188",
"POINTS": "0",
"<PAYMENT_STREAM_URL>": "https://publicservices.mortgagewebcenter.com/PaymentStream.aspx?CobranderId=1152&CriteriaId=113444969&ResultId=37"
},
{
"DESCR": "5/1 Interest Only ARM",
"RATE": "3.25",
"APR": "3.097",
"POINTS": "0",
"<PAYMENT_STREAM_URL>": "https://publicservices.mortgagewebcenter.com/PaymentStream.aspx?CobranderId=1152&CriteriaId=113444969&ResultId=13"
},
{
"DESCR": "10/1 Fully Amortizing ARM",
"RATE": "3.625",
"APR": "3.397",
"POINTS": "0",
"<PAYMENT_STREAM_URL>": "https://publicservices.mortgagewebcenter.com/PaymentStream.aspx?CobranderId=1152&CriteriaId=113444969&ResultId=22"
}
]
}
]
}];
var tr;
for (var i = 0; i < json.length; i++) {
tr = $('<tr/>');
tr.append("<td>" + json[i].DESCR + "</td>");
tr.append("<td>" + json[i].RATE + "</td>");
tr.append("<td>" + json[i].APR + "</td>");
tr.append("<td>" + json[i].POINTS + "</td>");
$('table').append(tr);
}
});
</script>
</head>
<body>
<table>
<tr>
<th>PRODUCT</th>
<th>RATE</th>
<th>APR*</th>
<th>POINTS</th>
</tr>
</table>
</body>
</html>
673
Check this:
for (var i = 0; i < json[0]["GROUPS"].length; i++) {
products = json[0]["GROUPS"][i]['PRODUCT'];
console.log(products);
for (var j = 0; j < products.length; j++) {
console.log(products[j]);
tr = $('<tr/>');
tr.append("<td>" + products[j]["DESCR"] + "</td>");
tr.append("<td>" + products[j]["RATE"] + "</td>");
tr.append("<td>" + products[j]["APR"] + "</td>");
tr.append("<td>" + products[j]["POINTS"] + "</td>");
$('table').append(tr);
}
}
Your json[0]["GROUPS"][i]['PRODUCT'] has more elements. I think you want to loop trough those as well.
Now moving your json data to an external file (notice no [0] index in json['GROPS']:
$(document).ready(function () {
$.getJSON( "https://api.myjson.com/bins/4krcq", function( json ) {
for (var i = 0; i < json["GROUPS"].length; i++) {
products = json["GROUPS"][i]['PRODUCT'];
console.log(products);
for (var j = 0; j < products.length; j++) {
console.log(products[j]);
tr = $('<tr/>');
tr.append("<td>" + products[j]["DESCR"] + "</td>");
tr.append("<td>" + products[j]["RATE"] + "</td>");
tr.append("<td>" + products[j]["APR"] + "</td>");
tr.append("<td>" + products[j]["POINTS"] + "</td>");
$('table').append(tr);
}
}
});
});
replace your script
var tr;
for (var i = 0; i < json.length; i++) {
tr = $('<tr/>');
tr.append("<td>" + json[i].DESCR + "</td>");
tr.append("<td>" + json[i].RATE + "</td>");
tr.append("<td>" + json[i].APR + "</td>");
tr.append("<td>" + json[i].POINTS + "</td>");
$('table').append(tr);
}
with
var groups = json[0].GROUPS;
//console.log(groups);
var tr;
for (var i = 0; i < groups.length; i++) {
//console.log(groups[i].PRODUCT[0]);
tr = $('<tr/>');
tr.append("<td>" + groups[i].PRODUCT[0].DESCR + "</td>");
tr.append("<td>" + groups[i].PRODUCT[0].RATE + "</td>");
tr.append("<td>" + groups[i].PRODUCT[0].APR + "</td>");
tr.append("<td>" + groups[i].PRODUCT[0].POINTS + "</td>");
$('table').append(tr);
}
});
Try this out. Use Jquery foreach loop.
var tr;
$.each(json.GROUPS, function(key, value) {
$.each(value.PRODUCT, function(key, item) {
tr = $('<tr/>');
tr.append("<td>" + item.DESCR + "</td>");
tr.append("<td>" + item.RATE + "</td>");
tr.append("<td>" + item.APR + "</td>");
tr.append("<td>" + item.POINTS + "</td>");
$('table').append(tr);
});
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
