Check if Ajax json response data

Question

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.

You have to check each item for `undefined` case. Check this [link](http://stackoverflow.com/questions/10653367/how-to-check-undefined-value-in-jquery) — abpatil, Aug 17 '16 at 13:15

eisbehr · Accepted Answer · 2016-08-17T12:03:34.890

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

cske · Answer 2 · 2016-08-17T12:10:15.373

Set default value this way:

<td>'+ (item.req2015||'&nbsp;') + '</td>

By filed setable defaults, easily reorganiziable:

var fdef = [ 'appnName     ',"&nbsp;"
    ,'Defectsin2014', "&nbsp;"
    ,'Defectsin2015',"&nbsp;"
    ,'costDefect   ', "&nbsp;"
    ,'req2014      ',"&nbsp;"
    ,'req2015      ', "&nbsp;"
    ,'ba           ',"&nbsp;"
    ,'config       ', "&nbsp;"
    ,'Financials   ',"&nbsp;"
    ,'qa           ', "&nbsp;" 
    ];

function buildLine(item) {
        var out = [];
    for (var i= 0,l=fdef.length;i<l;++i) {
        out.push(item[fdef[i][0]] || fdef[i][1]);
    }
    return '<tr><td>' + out.join('</td><td>') + '</td></tr>'
}

score -1 · Answer 3 · answered Aug 17 '16 at 11:57

-1

You can use this,

if(item.hasOwnProperty('req2015')){
  //add it
}

answered Aug 17 '16 at 11:57

pahan

567
1
8
22

Check if Ajax json response data

3 Answers3