如何使用 AJAX 調用以漂亮的 UI 格式打印 JSON 數組

Question

我正在嘗試以模式驗證數據。 如果出現錯誤，則會顯示警告框。 我以這種格式獲取 API 的輸出：

[{"Column":"ReportId","Result":"Invalid","Value":"repTest"}, 
{"Column":"Category","Result":"Invalid","Value":"testing"}]

我想讓它對用戶更具可讀性。 如何在警報框中獲得類似這樣的輸出：

由於 repTest，ReportId 無效
由於測試（或相應值之間的任何自定義字符串），類別無效

  $.ajax({
        type: 'POST',
        url: 'validate_report',
        contentType: 'application/json',
        data: JSON.stringify(AddreportRepoFinalObj),
        success: function (data) {
            if(data.indexOf('Failure') > -1){
                var e=JSON.stringify(data);
                pwIsf.alert({msg:'Failure'+e ,type:'error'});   
            }
            else if(data.indexOf('Success')>-1) 
            {
                document.getElementById('btn_addUpdate').removeAttribute('disabled')
                pwIsf.alert({msg:'Valid',type:'info'}); 
                $(validAddRepbtn).off();      
            }
            else{
                var a=data;                            // I want to access the value part here from the data. Like I want to get rcaReportID, Invalid and repTest only and not column result and value
               pwIsf.alert({msg:a, type:'error'}); 
            }
        },


    })

Answer 1

假設示例中最終if條件中的data是 JSON 字符串，那么您首先需要將其解析為對象數組。 從那里你可以遍歷它並構建你的字符串輸出：

 let data = '[{"Column":"ReportId","Result":"Invalid","Value":"repTest"},{"Column":"Category","Result":"Invalid","Value":"testing"}]' let arr = JSON.parse(data); var message = arr.map(o => `${o.Column} is ${o.Result} due to ${o.Value}`).join('\\r\\n'); console.log(message);