Add class depending on JSON data

Question

With dynamically generated HTML from JSON data I'm trying to add a class to each .status-card, in this case depending on the value of c.callStatus. This is the closest I got, but this just adds active class to all status-card. I'm guessing it's something to do with how I'm using $(this) or I'm missing something else?

$(function() {
    var agents = [];
    $.getJSON('js/agents.json', function(a) {
        $.each(a.agents, function(b, c) {
            var content = 
            '<div class="status-card">' +
            '<div class="agent-details">' +
            '<span class="agent-name">' + c.name + '</span>' +
            '<span class="handling-state">' + c.callStatus + '</span>' +
            '<span class="handling-time">' + c.handlingTime + '</span>' +
            '</div>' +
            '<div class="status-indicator"></div>' +
            '</div>'
            $(content).appendTo('#left');

            //Add class depending on callStatus
            $('.status-card').each(function() {
              if (c.callStatus == 'On Call') {
                $(this).removeClass('idle away').addClass('active');
              } else if (c.callStatus == 'Idle') {
                $(this).removeClass('active away').addClass('idle');
              } else {
                $(this).removeClass('active idle').addClass('away');
              }
              console.log(c.callStatus);
            });
        });

    });

});

Thanks!

Answer 1

This is the closest I got, but this just adds active class to all status-card.

This is happening because after adding each status-card you are adding other classes to all the status cards added till now:

$.each(a.agents, function(b, c) {
 ....
    // here you are updating the class for all the cards added till now.
    $('.status-card').each(function() {
     ....
    });
 ....
});

So, the active classes is added to all the other cards because that might be the callStatus in the last outer loop.

You can compute the className based on the callStatus before creating the HTML and then use that className in HTML like this:

function getClassNameByStatus (callStatus) {
    switch(callStatus){
        case "On Call":
            return "active";
        case "Idle":
            return "idle";
        default:
            return "away";
    }
}

$.each(a.agents, function(b, c) {
    var className = getClassNameByStatus(c.callStatus);
    var content =
        '<div class="status-card' + className + '">' +
        ....; // rest of the HTML
    $(content).appendTo('#left');
});

Answer 2

You're calling $('.status-card').each() for each agent in your a.agents list. so in the final iterate all .status-card elements will have the last agent.callStatus evaluated class.

I'd write something like this.

$(function() {                                                                                                                                                                                                                                 
  function createStatusCard(name,callStatus,handlingTime) {                                                                                                                                                                                    
    var status_class_map = {                                                                                                                                                                                                                   
      "On Call" : "active",                                                                                                                                                                                                                    
      "Idle" : "idle"                                                                                                                                                                                                                          
    };                                                                                                                                                                                                                                         
    var $content = $("<div/>").addClass("status-card").addClass(function(){                                                                                                                                                                    
      return status_class_map[callStatus] || "away";                                                                                                                                                                                           
    });                                                                                                                                                                                                                                        
    $content.html('<div class="agent-details">' +                                                                                                                                                                                              
      '<span class="agent-name">' + name + '</span>' +                                                                                                                                                                                         
      '<span class="handling-state">' + callStatus + '</span>' +                                                                                                                                                                               
      '<span class="handling-time">' + handlingTime + '</span>' +                                                                                                                                                                              
      '</div>' +                                                                                                                                                                                                                               
      '<div class="status-indicator"></div>');                                                                                                                                                                                                 
    return $content;                                                                                                                                                                                                                           
  }                                                                                                                                                                                                                                            
  $.getJSON('agents.json', function(a) {                                                                                                                                                                                                       
    $.each(a.agents, function(b, c) {                                                                                                                                                                                                          
      $("#left").append(createStatusCard(c.name,c.callStatus,c.handlingTime));                                                                                                                                                                 
    });                                                                                                                                                                                                                                        
  });                                                                                                                                                                                                                                          
}); 

it's more readable and easier to debug.