CODEWITHSUNDEEP
javascriptjqueryajax
Diwakar Bhatt
Diwakar Bhatt

Reputation: 515

How to put if condition within .append() in jquery

I Have the scenario where i have to append to td only when the value of element is not null I have achieved by using i.e.

tablerow = $('<tr>');
td = '<td>' + $(this)[0].attrValue+''                       
if ($(this)[0].countRequired != null)
td  = td + ' AND ' + $(this)[0].countRequired+''

but i want to achieve by using if condition within .append() i.e.

tablerow = $('<tr>')
.append($('<td>').append($(this)[0].attrValue+''))
if ($(this)[0].countRequired != null){
.append($('<td>').append($(this)[0].countRequired+''))
}

but while doing do i am getting error.(attached screenshot)

Error Occured

Below is my complete code

function fetchRUInfo(ruId, functionName, ruOutputId){
    $.ajax({
        type: 'GET',
        url: "getRUInfo",
        data:'ruId='+ruId,
        success: function(data) {
            if(functionName == 'countByRU'){
            $('#showInformationOfRu'+ruId).empty();
            var tablebody = $('<tbody>');
            var tablerow = "";
            /*var td = "";*/
                $(data.ruInfoList).each(function(index){

/*                      tablerow = $('<tr>');
                        td = '<td>' + $(this)[0].attrValue+''

                        if ($(this)[0].countRequired != null)
                            td  = td + ' AND ' + $(this)[0].countRequired+''*/

                    tablerow = $('<tr>')
                    .append($('<td>').append($(this)[0].attrValue+'')

                    if ($(this)[0].countRequired != null){
                        .append($(this)[0].countRequired+''))
                    }




                    $(tablerow).append(td);
                    $(tablebody).append(tablerow);

                    });

                    $('<table>')
                    .attr('id','ruDetails')
                    .attr('class','table table-striped rowClick one border-a')
                    .html('<thead><tr><th>Criteria</th></tr></thead>')
                    .append(tablebody)
                    .appendTo('div#showInformationOfRu'+ruId);

            }else if(functionName == 'countByBE'){

                $('#showInformationOfRuInBE'+ruOutputId).empty();
                var tablebody = $('<tbody>');
                var tablerow = "";
                var td = "";
                    $(data.ruInfoList).each(function(index){

                            tablerow = $('<tr>');
                            td = '<td>' + $(this)[0].attrValue+''

                            if ($(this)[0].countRequired != null)
                                td  = td + ' AND ' + $(this)[0].countRequired+''

                        $(tablerow).append(td);
                        $(tablebody).append(tablerow);

                        });

                        $('<table>')
                        .attr('id','ruDetails')
                        .attr('class','table table-striped rowClick one border-a')
                        .html('<thead><tr><th>Criteria</th></tr></thead>')
                        .append(tablebody)
                        .appendTo('div#showInformationOfRuInBE'+ruOutputId);

            }
        },
        error: function() {
            alert('Some error occured while fetching Resource Units, please refresh it and try again');
        }
    });
};

Updated Used conditional operator way, but still got error.. Still Error

Error 3

Upvotes: 1

Views: 5181

Answers (1)

T.J. Crowder
T.J. Crowder

Reputation: 1074495

You're getting an error because you're inserting a statement in the middle of an expression. You can't do that. You end up with a statement like this in the if body:

.append($('<td>').append($(this)[0].countRequired+''))

...which is a syntax error, the . has nothing to operate on.

Before continuing, $(this)[0].xyz is just a long-winded way to write this.xyz, so I'm going to use the shorter version here on out. :-)

You've said in a comment that you want to add to the td from the unconditional part of your code, rather than adding a second td as that code seems to try to do. If so, this is a reasonable use of the conditional operator:

tablerow.append($('<td>').append(
    this.attrValue + '' + (this.countRequired != null ? this.countRequired : '')
));

Or we can use the curiously-powerful || operator*:

tablerow.append($('<td>').append(
    this.attrValue + '' + (this.countRequired || '')
));

Or if it were more complicated, we'd just use a variable:

var cellContent = this.attrValue + '';
if (this.countRequired != null) {
    cellContent += this.countRequired;
}
tablerow.append($('<td>').append(cellContent));

* (that's a post on my anemic little blog)

No TypeError here:

var obj = {
  attrValue: "foo",
  countRequired: "bar",
  test: function() {
    var tablerow = $("<tr>");
    tablerow.append($('<td>').append(
        this.attrValue + '' + (this.countRequired != null ? this.countRequired : '')
    ));
    $("#table").append(tablerow);
  }
};
obj.test();
obj.countRequired = null;
obj.test();
<table><tbody id="table"></tbody></table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Upvotes: 1

Related Questions