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=".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>": ".aspx?CobranderId=1152&CriteriaId=113444902&ResultId=58"
},
{
"DESCR": "20 Year Fixed Rate",
"RATE": "4.125",
"APR": "4.162",
"POINTS": "0",
"<PAYMENT_STREAM_URL>": ".aspx?CobranderId=1152&CriteriaId=113444902&ResultId=52"
},
{
"DESCR": "15 Year Fixed Rate",
"RATE": "3.375",
"APR": "3.422",
"POINTS": "0",
"<PAYMENT_STREAM_URL>": ".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>": ".aspx?CobranderId=1152&CriteriaId=113444913&ResultId=27"
},
{
"DESCR": "5/1 Fully Amortizing ARM",
"RATE": "3.25",
"APR": "3.113",
"POINTS": "0",
"<PAYMENT_STREAM_URL>": ".aspx?CobranderId=1152&CriteriaId=113444913&ResultId=13"
},
{
"DESCR": "7/1 Fully Amortizing ARM",
"RATE": "3.5",
"APR": "3.258",
"POINTS": "0",
"<PAYMENT_STREAM_URL>": ".aspx?CobranderId=1152&CriteriaId=113444913&ResultId=5"
},
{
"DESCR": "10/1 Fully Amortizing ARM",
"RATE": "3.75",
"APR": "3.487",
"POINTS": "0",
"<PAYMENT_STREAM_URL>": ".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>": ".aspx?CobranderId=1152&CriteriaId=113444921&ResultId=6"
},
{
"DESCR": "15 Year Fixed Rate",
"RATE": "3.5",
"APR": "3.526",
"POINTS": "0",
"<PAYMENT_STREAM_URL>": ".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>": ".aspx?CobranderId=1152&CriteriaId=113444935&ResultId=56"
},
{
"DESCR": "5/1 Fully Amortizing ARM",
"RATE": "3",
"APR": "3.014",
"POINTS": "0",
"<PAYMENT_STREAM_URL>": ".aspx?CobranderId=1152&CriteriaId=113444935&ResultId=45"
},
{
"DESCR": "7/1 Fully Amortizing ARM",
"RATE": "3.25",
"APR": "3.13",
"POINTS": "0",
"<PAYMENT_STREAM_URL>": ".aspx?CobranderId=1152&CriteriaId=113444935&ResultId=37"
},
{
"DESCR": "5/1 Interest Only ARM",
"RATE": "3.125",
"APR": "3.055",
"POINTS": "0",
"<PAYMENT_STREAM_URL>": ".aspx?CobranderId=1152&CriteriaId=113444935&ResultId=13"
},
{
"DESCR": "10/1 Fully Amortizing ARM",
"RATE": "3.5",
"APR": "3.32",
"POINTS": "0",
"<PAYMENT_STREAM_URL>": ".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>": ".aspx?CobranderId=1152&CriteriaId=113444940&ResultId=62"
},
{
"DESCR": "20 Year Fixed Rate",
"RATE": "4.25",
"APR": "4.287",
"POINTS": "0",
"<PAYMENT_STREAM_URL>": ".aspx?CobranderId=1152&CriteriaId=113444940&ResultId=55"
},
{
"DESCR": "15 Year Fixed Rate",
"RATE": "3.5",
"APR": "3.547",
"POINTS": "0",
"<PAYMENT_STREAM_URL>": ".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>": ".aspx?CobranderId=1152&CriteriaId=113444949&ResultId=30"
},
{
"DESCR": "5/1 Fully Amortizing ARM",
"RATE": "3.375",
"APR": "3.157",
"POINTS": "0",
"<PAYMENT_STREAM_URL>": ".aspx?CobranderId=1152&CriteriaId=113444949&ResultId=15"
},
{
"DESCR": "7/1 Fully Amortizing ARM",
"RATE": "3.625",
"APR": "3.317",
"POINTS": "0",
"<PAYMENT_STREAM_URL>": ".aspx?CobranderId=1152&CriteriaId=113444949&ResultId=6"
},
{
"DESCR": "10/1 Fully Amortizing ARM",
"RATE": "3.875",
"APR": "3.566",
"POINTS": "0",
"<PAYMENT_STREAM_URL>": ".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>": ".aspx?CobranderId=1152&CriteriaId=113444962&ResultId=6"
},
{
"DESCR": "15 Year Fixed Rate",
"RATE": "3.625",
"APR": "3.651",
"POINTS": "0",
"<PAYMENT_STREAM_URL>": ".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>": ".aspx?CobranderId=1152&CriteriaId=113444969&ResultId=56"
},
{
"DESCR": "5/1 Fully Amortizing ARM",
"RATE": "3.125",
"APR": "3.058",
"POINTS": "0",
"<PAYMENT_STREAM_URL>": ".aspx?CobranderId=1152&CriteriaId=113444969&ResultId=45"
},
{
"DESCR": "7/1 Fully Amortizing ARM",
"RATE": "3.375",
"APR": "3.188",
"POINTS": "0",
"<PAYMENT_STREAM_URL>": ".aspx?CobranderId=1152&CriteriaId=113444969&ResultId=37"
},
{
"DESCR": "5/1 Interest Only ARM",
"RATE": "3.25",
"APR": "3.097",
"POINTS": "0",
"<PAYMENT_STREAM_URL>": ".aspx?CobranderId=1152&CriteriaId=113444969&ResultId=13"
},
{
"DESCR": "10/1 Fully Amortizing ARM",
"RATE": "3.625",
"APR": "3.397",
"POINTS": "0",
"<PAYMENT_STREAM_URL>": ".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>
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./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./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./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./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./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./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./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./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./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./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./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./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./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./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./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./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./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./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./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./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./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./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./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./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./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./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./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./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./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>
6 Answers
Reset to default 6Check 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./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);
});
});
var tr;
for (var i = 0; i < json[0].GROUPS.length; i++) {
var tmp = json[0].GROUPS[i];
tr = $('<tr/>');
tr.append("<td>" + tmp.PRODUCT.DESCR + "</td>");
tr.append("<td>" + tmp.PRODUCT.RATE + "</td>");
tr.append("<td>" + tmp.PRODUCT.APR + "</td>");
tr.append("<td>" + tmp.PRODUCT.POINTS + "</td>");
$('table').append(tr);
}
Try json[0].GROUPS[i].PRODUCT[0].DESCR instead json[i].DESCR
var tr;
for (var i = 0; i < json[0].GROUPS.length; i++) {
console.log(json[0].GROUPS[i])
tr = $('<tr/>');
tr.append("<td>" + json[0].GROUPS[i].PRODUCT[0].DESCR + "</td>");
tr.append("<td>" + json[0].GROUPS[i].PRODUCT[0].RATE + "</td>");
tr.append("<td>" + json[0].GROUPS[i].PRODUCT[0].APR + "</td>");
tr.append("<td>" + json[0].GROUPS[i].PRODUCT[0].POINTS + "</td>");
$('table').append(tr);
}
Fiddle
Loop over each object, push in string array and join them. Append in target table, it is better.
$(document).ready(function () {
$.getJSON(url,
function (json) {
var tr=[];
for (var i = 0; i < json.length; i++) {
tr.push('<tr>');
tr.push("<td>" + json[i].DESCR + "</td>");
tr.push("<td>" + json[i].RATE + "</td>");
tr.push("<td>" + json[i].APR + "</td>");
tr.push("<td>" + json[i].POINTS + "</td>");
tr.push('</tr>');
}
$('table').append($(tr.join('')));
});
please see it Parsing JSON objects for HTML table