How to print JSON array with AJAX call in a pretty format for UI

Question

I am trying to validate data in a modal. If there is an error, an alert box is displayed. I am getting the output of the API in this format:

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

I want to make it more readable to the user. How to get an output something like this in the alert box:

ReportId is invalid due to repTest
Category is invalid due to testing ( or any custom string between the corresponding values)

  $.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

Assuming that data in the final if condition in your example is a JSON string then you first need to parse it to an array of objects. From there you can loop through it and build your string output:

 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);