vr3w3c9 vr3w3c9 - 3 months ago 7
jQuery Question

Check if Ajax json response data

Im using a jqueryAjax function in a jsp page to display a html table. The function returns response as a json object. Im using the json object, iterating the same and displaying the column values. But if the field value is empty, then the corresponding value in the html table is specified as 'undefined' Below is my sample code

$.each(data1, function (i, item) {
trHTML += '<tr><td >' + item.appnName + '</td><td>' + item.Defectsin2014 + '</td><td>' + item.Defectsin2015 + '</td><td>'+
item.DefectsasperBenchmarks +'</td><td>'+item.costDefect + '</td><td>'+ item.req2014 + '</td><td>'+ item.req2015 +'</td><td>' +
item.ba+ '</td><td>'+ item.config+'</td><td>'+ item.Financials+ '</td><td>' + item.bReports + '</td><td>'+
item.qa + '</td></tr>';
});
$('#records_table').append(trHTML);


In the above, if a particular field is not available in the json for example, if item.req2015 data is not available for a particular row, then the html table displays the corresponding field as 'undefined'.I want the application to display an empty or blank field if the data is not available. Is there any way to acheive the same.

Any help on this is much appreciated.

Answer

Check the properties and give them an default before using them.

$.each(data1, function (i, item) {
    item.appnName      = item.appnName      || "&nbsp;";
    item.Defectsin2014 = item.Defectsin2014 || "&nbsp;";
    item.Defectsin2015 = item.Defectsin2015 || "&nbsp;";
    item.costDefect    = item.costDefect    || "&nbsp;";
    item.req2014       = item.req2014       || "&nbsp;";
    item.req2015       = item.req2015       || "&nbsp;";
    item.ba            = item.ba            || "&nbsp;";
    item.config        = item.config        || "&nbsp;";
    item.Financials    = item.Financials    || "&nbsp;";
    item.bReports      = item.bReports      || "&nbsp;";
    item.qa            = item.qa            || "&nbsp;";

    trHTML += '<tr><td >' + item.appnName + '</td><td>' + item.Defectsin2014 + '</td><td>' + item.Defectsin2015 + '</td><td>'+
    item.DefectsasperBenchmarks +'</td><td>'+item.costDefect + '</td><td>'+ item.req2014 + '</td><td>'+ item.req2015 +'</td><td>' +
    item.ba+ '</td><td>'+ item.config+'</td><td>'+ item.Financials+ '</td><td>' + item.bReports + '</td><td>'+
    item.qa + '</td></tr>';
});
$('#records_table').append(trHTML);

Or even shorter possible with an inline decision:

trHTML += '<tr><td >' + (item.appnName || "&nbsp;") + '</td><td>' + (item.Defectsin2014 || "&nbsp;") + '</td><td>' + (item.Defectsin2015 || "&nbsp;") + '</td><td>'+
(item.DefectsasperBenchmarks || "&nbsp;") +'</td><td>'+(item.costDefect || "&nbsp;") + '</td><td>'+ (item.req2014 || "&nbsp;") + '</td><td>'+ (item.req2015 || "&nbsp;") +'</td><td>' +
(item.ba || "&nbsp;") + '</td><td>'+ (item.config || "&nbsp;")+'</td><td>'+ (item.Financials || "&nbsp;") + '</td><td>' + (item.bReports || "&nbsp;") + '</td><td>'+
(item.qa || "&nbsp;") + '</td></tr>';