JSON डेटा

Question

JSON डेटा मैं हर .status-card करने के लिए एक वर्ग को जोड़ने के लिए, इस मामले c.callStatus के मूल्य के आधार में कोशिश कर रहा हूँ से गतिशील रूप से उत्पन्न एचटीएमएल के साथ के आधार पर वर्ग जोड़ें। यह मुझे सबसे नज़दीक मिला है, लेकिन यह active कक्षा को सभी status-card में जोड़ता है। मैं अनुमान लगा रहा हूं कि मैं $(this) का उपयोग कैसे कर रहा हूं या मुझे कुछ और याद आ रहा है?

$(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); 
      }); 
     }); 

    }); 

}); 

धन्यवाद!

Answer 1

आप अपने a.agents सूची में प्रत्येक agent के लिए $('.status-card').each() कॉल कर रहे हैं। इसलिए अंतिम पुनरावृत्त में सभी .status-card तत्वों के पास अंतिम agent.callStatus मूल्यांकन कक्षा होगी।

मैं ऐसा कुछ लिखूंगा।

$(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));                                         
    });                                                           
    });                                                           
}); 

यह डीबग करने के लिए और अधिक पढ़ने योग्य और आसान है।

Answer 2

ऐसा इसलिए है क्योंकि आपके पास status-cardeach लूप आपके JSON लूप के अंदर घोंसला है। इसलिए जब भी आप JSON डेटा से ऑब्जेक्ट के माध्यम से लूप करते हैं तो आप status-card तत्व की कक्षा को सेट कर रहे हैं जो पहले से ही डोम में जोड़ा जा चुका है।

आप जितने जोड़कर पहले तत्वों का निर्माण वर्ग सेट करने के लिए पुनर्गठन कर सकते हैं।

$.each(a.agents, function(b, c) { 
     var content = 
     '<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>'; 

     var $statusCard = $("<div/>").addClass("status-card"); 
            .append(content); 

     $statusCard.addClass(function(){ 
      switch(c.callStatus){ 
       case "On Call": 
        return "active"; 
       case "Idle": 
        return "idle"; 
       default: 
        return "away"; 
      } 
     }()); 

     $statusCard.appendTo('#left'); 


    }); 

Answer 3

यह निकटतम मुझे मिल गया है, लेकिन यह सिर्फ सभी status-card करने के लिए active वर्ग कहते हैं।

यह प्रत्येक status-card आप सभी स्थिति कार्ड के लिए अन्य वर्गों को जोड़ रहे हैं जोड़ने के बाद हो रहा है क्योंकि अब तक कहा:

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

तो, active कक्षाएं अन्य सभी कार्ड में जोड़ा जाता है क्योंकि कि हो सकता है अंतिम बाहरी लूप में callStatus बनें।

आप HTML बनाने से पहले classNamecallStatus के आधार पर गणना कर सकता है और उसके बाद इस तरह का उपयोग करें कि className HTML में:

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