使用jQuery將JSON解析為HTML表
[英]Parsing JSON to HTML table using jQuery
問題描述
我使用下面的代碼來解析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>
6 個解決方案
解決方案1
6 已采納 2015-07-02 07:29:56
檢查一下：
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);
}
}
});
});
解決方案2
3 2015-07-02 07:37:43
替換你的腳本
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);
}
同
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);
}
});
解決方案3
3 2015-07-02 07:58:36
試試吧。 使用Jquery foreach循環。
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);
});
});
解決方案4
2 2015-07-02 07:23:02
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);
}
解決方案5
2 2015-07-02 07:27:22
試試json[0].GROUPS[i].PRODUCT[0].DESCR代替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);
}
解決方案6
2 2015-07-02 08:02:26
遍歷每個對象，推入字符串數組並加入它們。 附加在目標表中，它更好。
$(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('')));
});
jquery json 顯示未定義的 html 表解析
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.