How to use if statement to filter data that comes from json

Question

i am getting the expected result to json format. I want the icon to be changed when i click on id "#imp" with respect to the status field in db. The value in database are updating as i click but icon are not changed. I am getting problem when using if statement inside class to toggle between classes according to the status coming from json. I tried this code but it didn't worked for me. Any other good solution would be greatful for me. Thank you.

$("#imp").live('click',function(){
    $this = $(this);
    var ids = $(this).prev().prev().prev().prev().attr("class");
    var impt = $(this).prev().attr("class");
    var alllist = "";
    $.ajax({
        type: "POST",
        url: "<?php echo base_url().'index.php/cms/mark_imp'; ?>",
        dataType: "json",
        data: {
            'id' : ids,
            'imp' : impt
        },

        beforeSend: function()
        {

        },
        success: function(data)
        {
            var list_len = data.length;

            for(var i=0;i<list_len;i++)
            {
                var imp_status = data[i].important;
                alllist += '<li class="list-group-item"><span>' +
                data[i].list + '</span><span class="pull-right"><span class="'+ data[i].id +'"></span>' +
                '<i class="icon-pencil" style="color:#f8a326"></i>&nbsp;&nbsp;&nbsp;' +
                '<i class="icon-remove" style="color:#f34541;cursor:pointer" id="del_list" title="Delete"></i>&nbsp;&nbsp;&nbsp;' +
                '<span class="'+ data[i].important +'"></span><i class="" style="color:#00acec;cursor:pointer" title="Mark as important" id="imp"></i></span></li>';


                if(imp_status === "0")
                {
                    $this.addClass("icon-bookmark-empty");
                }
                if(imp_status === "1")
                {
                    $this.addClass("icon-bookmark");
                }

            //here i want to add different class for different imp_status. Like given i want to add class icon-bookmark-empty when imp_status is 0 and when it is 1 i want to add icon-bookmark.

            }
            $("#inlist").html(alllist);
        }
    });
});

[Official docs about .live()](http://api.jquery.com/live/). And [What's wrong with the jQuery live method?](http://stackoverflow.com/questions/11115864/whats-wrong-with-the-jquery-live-method). — Regent, Oct 03 '14 at 11:09

score 0 · Answer 1 · answered Oct 03 '14 at 11:12

0

If you use the jQuery constructor, you can use jQuery's .addClass() etc. on them. Just a quick code example:

     success: function(data) {

         var list_len = data.length,
             inlist = $("#inlist");
             inlist.empty();

         for(var i=0;i<list_len;i++) {
             var imp_status = data[i].important,
                 item = $('<li></li>');

             // Append spans, i's and other things you need
             item.append('<span>Content</span');

             if(imp_status == 'active') {
                 item.addClass('active');
             } else {
                 item.addClass('somethingelse');
             }

             inlist.append(item);

         }
     }

answered Oct 03 '14 at 11:12

wiesion

2,349
12
21

i tried addclass approach but it didnot worked for me. See i have edited my question. when i use it, values are updated in database but icon is disappeared. – user254153 Oct 03 '14 at 11:20
@user254153 Are you sure `imp_status` equals to `"0"` (String)? Can it be `0` (Number), for example? – Regent Oct 03 '14 at 11:26
actually in db this field is boolean type. – user254153 Oct 03 '14 at 11:38
@user254153 check what value `imp_status` has. And I hope you know difference between `===` and `==`? – Regent Oct 03 '14 at 11:53
since it is boolean value i used true or false. like if(imp_status == true){........} and i goes inside if but doesnot add class. Please help. Whats wroing with it – user254153 Oct 03 '14 at 15:00

score 0 · Answer 2 · answered Oct 03 '14 at 11:38

If I understand you correctly you can try this. Inside your for loop just add this if statement:

if(i == 0) {
  $('.your-class-here').addClass('icon-bookmark-empty');
} else if (i == 1) {
  $('.your-class-here').addClass('icon-bookmark');
}

So, your for loop will look like this:

$("#imp").live('click',function(){
  $this = $(this);
  var ids = $(this).prev().prev().prev().prev().attr("class");
  var impt = $(this).prev().attr("class");
  var alllist = "";
  $.ajax({
        type: "POST",
        url: "<?php echo base_url().'index.php/cms/mark_imp'; ?>",
         dataType: "json",
        data: {
            'id' : ids,
            'imp' : impt
        },

        beforeSend: function()
        {

        },
        success: function(data)
        {
         var list_len = data.length;

         for(var i=0;i<list_len;i++)
         {
             var imp_status = data[i].important;   
             alllist += '<li class="list-group-item"><span>' +
                        data[i].list + '</span><span class="pull-right"><span class="'+ data[i].id +'"></span>' +
                     '<i class="icon-pencil" style="color:#f8a326"></i>&nbsp;&nbsp;&nbsp;' +
                        '<i class="icon-remove" style="color:#f34541;cursor:pointer" id="del_list" title="Delete"></i>&nbsp;&nbsp;&nbsp;' +
                        '<span class="'+ data[i].important +'"></span><i class="'+ if(imp_status === "0"){"icon-bookmark-empty"} if(imp_status === "1"){"icon-bookmark"} +'" style="color:#00acec;cursor:pointer" title="Mark as important" id="imp"></i></span></li>';

           //here i want to add different class for different imp_status. Like given i want to add class icon-bookmark-empty when imp_status is 0 and when it is 1 i want to add icon-bookmark.
           if(i == 0) {
             $('.your-class-here').addClass('icon-bookmark-empty');
           } else if (i == 1) {
             $('.your-class-here').addClass('icon-bookmark');
           }

         }
         $("#inlist").html(alllist);
        }
    });

});

This way, when your loop start counting if i is 0 it will add class to required element, or if i is 1 it will add some different class to required element.

i is variable starting from 0 to length of json object. It may be any number starting from 0. Its not only 0 or 1. — user254153, Oct 03 '14 at 11:42

How to use if statement to filter data that comes from json

2 Answers2