如何格式化以下JSON并在html页面中显示
[ { "customerAddressZip": "", "customerAddressState": "", "referenceNumber": "APP-0911-1004-32", "dateServiceCompleted": "", "claimParts": [ { "causal_part": "true", "failedPartNumber": "1112", "partInvoiceNumber": "", "partQuantity": "1", "failedPartSerial": "", "partSequence": "1", "partAmount": "", "partSerialNumber": "", "failedPartQuantity": "1", "Claim_WID": "20", "failedPartInstallDate": "", "partNumber": "" } ], "serialNumber": "111", "customerComplaint": "", "customerEmail": "", "applicationType": "", "customerPhone": "", "warrantyType": "01", "customerLastName": "", "customerAddressLine1": "", "serviceAgreementNumber": "", "customerAddressLine2": "", "customerFirstName": "", "retrievalCode": "BMLExmiaYkaj", "repairCategory": "", "claimStatus": "", "competitiveEquipment": "f", "dateServiceRequested": "", "serviceExplanation": "", "customerAddressCity": "", "purchaseDate": "", "Claim_WID": "20", "defectCode": "", "modelNumber": "24ABA318A0030010" } ]
FORMATTED JSON
[{
"customerAddressZip": "",
"customerAddressState": "",
"referenceNumber": "APP-0911-1004-32",
"dateServiceCompleted": "",
"claimParts": [
{
"causal_part": "true",
"failedPartNumber": "1112",
"partInvoiceNumber": "",
"partQuantity": "1",
"failedPartSerial": "",
"partSequence": "1",
"partAmount": "",
"partSerialNumber": "",
"failedPartQuantity": "1",
"Claim_WID": "20",
"failedPartInstallDate": "",
"partNumber": ""
}
],
"serialNumber": "111",
"customerComplaint": "",
"customerEmail": "",
"applicationType": "",
"customerPhone": "",
"warrantyType": "01",
"customerLastName": "",
"customerAddressLine1": "",
"serviceAgreementNumber": "",
"customerAddressLine2": "",
"customerFirstName": "",
"retrievalCode": "BMLExmiaYkaj",
"repairCategory": "",
"claimStatus": "",
"competitiveEquipment": "f",
"dateServiceRequested": "",
"serviceExplanation": "",
"customerAddressCity": "",
"purchaseDate": "",
"Claim_WID": "20",
"defectCode": "",
"modelNumber": "24ABA318A0030010"
}]
AJAX代码:
function addData() {
$.ajax({
url: requrl,
crossDomain: true,
dataType: "json",
success: onSuccess,
error: onError
});
function onSuccess(data, textStatus, jqXHR) {
var response = JSON.stringify(data, null, "\t");
$('#apidata').html("<h2>Claim Found</h2>\n");
$('#apidetails').html("<p>Status:" + textStatus + "</p>\n" + "<p>Data:</p>\n" + "<p>" + response + "</p> " + "\n");
}
function onError(jqXHR, textStatus, errorThrown) {
console.log(jqXHR);
$('#apidata').html("<h2>No Claim Found</h2>\n<p>Please validate you Retrieval Code and ServiceBench credentials.</p>\n");
$('#apidetails').html("<h2>Error!</h2>\n<p>jqXHR:</p>\n" + jqXHR + "\n<p>Status:</p>\n" + textStatus + "<p>Error:</p>\n" + errorThrown);
}
}
这里requrl返回上面的json响应。
答案 0 :(得分:0)
尝试:
$('#apidetails').html("<p>Status:" + textStatus + "</p>\n" + "<p>Data:</p>" + "<pre>" + response + "</pre>");
<pre>
标记保留格式。无需在HTML中定义换行符。