以编程方式使用Ajax jQuery美化JSON响应

Question

我如何像下面这样格式化以下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" } ] 

格式的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响应。

Answer 1

尝试：

$('#apidetails').html("<p>Status:" + textStatus + "</p>\n" + "<p>Data:</p>" + "<pre>" + response + "</pre>");

<pre>标记保留格式。 无需在HTML中定义换行符。