CODEWITHSUNDEEP
jqueryajax
John
John

Reputation: 952

Using If Else in jQuery

Build an if else statement in my script.

If data = 0 I want to run return:

<i class="fa fa-check-circle"></i>

If data = 1 I want to run return:

<i class="fa fa-id-badge"></i>

If data = 2 I want to run return:

<i class="fa fa-quora"></i>

I have build a simple If Else statement so far. My script shows fa fa-check-circle when the returned data is 0 else it shows fa fa-id-badge.

Does someone know how I can make a definition for all the options. Something like:

(data == 0)
(data == 1)
(data == 2)

Here is my script:

<script type="text/javascript">
 $( document ).ready(function() {
  $('#grid1').DataTable({
   "bprocessing": true,
   "serverSide": true,
        "ajax": {
            "url": "response1.php",
            "type": "POST",
            "error": function(){
                $("#grid_processing").css("display","none");
            }
        },
       "columnDefs": [ 
            { "targets": 0, "render": 
            function ( data, type, full, meta ) { 
            return  '<i class="'+ (data == 0 ? 'fa fa-check-circle"></i>' :  'fa fa-id-badge"></i>'); 
            } } 
        ]    
  });   
 });
</script>

Upvotes: 0

Views: 101

Answers (3)

Pierre-Adrien Maison
Pierre-Adrien Maison

Reputation: 610

You can use a switch instead of a ternary, it's more readable.

function (data, type, full, meta) {
    var iconClass;
    switch (data) {
        case 0:
            iconClass = "check-circle";
            break;
        case 1:
            iconClass = "id-badge";
            break;
        case 2:
            iconClass = "quora";
            break;
    }
    return  "<i class='fa fa-" + iconClass + "'></i>"; 
}

Upvotes: 0

Colin Cline
Colin Cline

Reputation: 1279

There are multiple ways to do this one of them is switch case.

var icon = '';
function(data, type, full, meta ){
    switch(data){
        case '0':
            icon = "fa-check-circle";
            break;
        case '1':
            icon = "fa-check-badge";
            break;
        case '2':
            icon = "fa-check-quora";
            break;
        default:
            icon = "fa-check-circle";
    }

    return '<i class="fa '+ icon +'"></i>';
}

Upvotes: 1

You Old Fool
You Old Fool

Reputation: 22969

This really only requires a basic if ... else statement instead of a ternary. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else

function ( data, type, full, meta ) { 
    var class;
    if (data == 0) {
        class = 'fa fa-check-circle';
    } else if (data == 1) {
        class = 'fa fa-id-badge';
    } else if (data == 2)) {
        class = 'fa fa-id-quora';
    }
    return  '<i class="' + class + '"></i>'); 
}

Of course you could continue to use a ternary but it's a bit ugly:

function ( data, type, full, meta ) { 
    return  '<i class="fa ' + (data == 0 ? 'fa-check-circle' : (data == 1 ? 'fa-id-badge' : 'fa-quora')) + '"></i>'); 
}

Upvotes: 2

Related Questions