Q:

Add class depending on JSON data

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!

A:

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.

