Using If Else in jQuery

Question

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>

Did you try switch case?

Colin Cline
– Colin Cline

2018-11-25 18:48:58 +00:00
Commented Nov 25, 2018 at 18:48 — Colin Cline
– Colin Cline, Commented Nov 25, 2018 at 18:48

You Old Fool · Accepted Answer · 2018-11-25 18:52:35Z

2

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

answered Nov 25, 2018 at 18:52

You Old Fool

23.2k14 gold badges92 silver badges118 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Colin Cline · Accepted Answer · 2018-11-25 18:56:41Z

1

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

answered Nov 25, 2018 at 18:56

Colin Cline

1,2791 gold badge12 silver badges25 bronze badges

Comments

Pierre-Adrien Maison · Accepted Answer · 2018-11-25 18:57:02Z

0

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>"; 
}

answered Nov 25, 2018 at 18:57

Pierre-Adrien Maison

6207 silver badges17 bronze badges

Collectives™ on Stack Overflow

Using If Else in jQuery

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related