我正在使用下面的代码来解析 JSON 文件，但我在每个表列中都未定义。
<!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>
最佳答案
检查这个:
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);
}
}
您的 json[0]["GROUPS"][i]['PRODUCT'] 有更多元素。我想你也想遍历这些。
现在将您的 json 数据移动到外部文件(注意 json['GROPS'] 中没有 [0] 索引:
$(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);
}
}
});
});
关于javascript - 使用 jQuery 将 JSON 解析为 HTML 表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31177936/