Automatically create variable names from results?

Question

I'm trying to figure out how optimize my code away from countless if/else statements.

My current code is:

jQuery.each(val, function (i, data) {    
    
    //Secret Rare
    if(data.card_variations[0].card_rarity == 'Secret Rare'){
        
        secretcount++;           
        jQuery('.secret-cards').append('<figure><img src="'+data.card_img+'" title="'+data.card_name+'" alt="'+data.card_name+'"><figcaption>'+data.card_variations[0].card_code+'<figcaption></figure>');    
    }   
    
    //Ultra Rare
    if(data.card_variations[0].card_rarity == 'Ultra Rare'){
        
        ultracount++;           
        jQuery('.ultra-cards').append('<figure><img src="'+data.card_img+'" title="'+data.card_name+'" alt="'+data.card_name+'"><figcaption>'+data.card_variations[0].card_code+'<figcaption></figure>');    
    }            
    
    //Super Rare
    if(data.card_variations[0].card_rarity == 'Super Rare'){
        
        supercount++;            
        jQuery('.super-cards').append('<figure><img src="'+data.card_img+'" title="'+data.card_name+'" alt="'+data.card_name+'"><figcaption>'+data.card_variations[0].card_code+'<figcaption></figure>');    
    }
    
    //Rare
    if(data.card_variations[0].card_rarity == 'Rare'){
        
        rarecount++;         
        jQuery('.rare-cards').append('<figure><img src="'+data.card_img+'" title="'+data.card_name+'" alt="'+data.card_name+'"><figcaption>'+data.card_variations[0].card_code+'<figcaption></figure>');    
    }   
    
    //ShortPrint
    if(data.card_variations[0].card_rarity == 'Short Print'){
        
        shortprintcount++;          
        jQuery('.shortprint-cards').append('<figure><img src="'+data.card_img+'" title="'+data.card_name+'" alt="'+data.card_name+'"><figcaption>'+data.card_variations[0].card_code+'<figcaption></figure>');    
    }             
    
    //Common
    if(data.card_variations[0].card_rarity == 'Common'){
        
        commoncount++;            
        jQuery('.common-cards').append('<figure><img src="'+data.card_img+'" title="'+data.card_name+'" alt="'+data.card_name+'"><figcaption>'+data.card_variations[0].card_code+'<figcaption></figure>');    
    }
   
    
});

As you can see, this is a mess of if/else statements checking for specific rarities and appending to a div depending on the current rarity. There are over 25 different rarities so I figured I can't keep going this way and I'd also need to accommodate every rarity going forward manually through code. I'm also running a count for each to output how many they are.

Is there an optimal way of assigning variables for the counters and dynamically create div class names depending on the result?

EDIT: Maybe an optimal method would be creating an array of all rarities. Since this would still require manual updating, maybe I can query the database through PHP to get all rarities and then fill this array...

dw_ · Accepted Answer · 2020-09-18 10:15:49Z

Since in the browser var x = 1 is equal to var window.x = 1, you can use the global object to create dynamic variable names.

var rarityName = data.card_variations[0].card_rarity;
window[rarityName] = window[rarityName] ? window[rarityName] + 1 : 1;

But it's probably better to just create a scoped object, that will store the count for you.

var counts = {}; // declare once in global scope somewhere first
//
var rarityName = data.card_variations[0].card_rarity;
counts[rarityName] = counts[rarityName] ? counts[rarityName] + 1 : 1;

So it will be something like this:

var counts = {};
jQuery.each(val, function (i, data) {    
    var rarityName = data.card_variations[0].card_rarity;
    counts[rarityName] = counts[rarityName] ? counts[rarityName] + 1 : 1;
    var friendlyClassName = "." + rarityName.toLowerCase().split(" ").join("-");
    jQuery(friendlyClassName).append('<figure><img src="'+data.card_img+'" title="'+data.card_name+'" alt="'+data.card_name+'"><figcaption>'+data.card_variations[0].card_code+'<figcaption></figure>');  
});

Craicerjack · Accepted Answer · 2020-09-18 10:08:45Z

2

You could use a dictionary to keep track of the counts and use the rarity as the key. You could also cut out on a lot of code repetition if you change your classes to match the rarity too.

counts = {
  "Secret Rare": 0,
  "Ultra Rare": 0,
  "Super Rare": 0,
  "Rare": 0,
  "Short Print": 0,
  "Common": 0  
}
jQuery.each(val, function (i, data) {  
  let rarity = data.card_variations[0].card_rarity;
  let className = rarity.toLowerCase().replace(" ", "-");
  counts[rarity] += 1;
  jQuery(className).append('<figure><img src="'+data.card_img+'" title="'+data.card_name+'" alt="'+data.card_name+'"><figcaption>'+data.card_variations[0].card_code+'<figcaption></figure>'); 
});

answered Sep 18, 2020 at 10:08

Craicerjack

6,3303 gold badges34 silver badges41 bronze badges

Comments

ATD · Accepted Answer · 2020-09-18 10:08:17Z

0

Could you build a map object? The key would be the card_rarity name and the value would be {element, count}. A map.has(key) will check if it already exists - if it does, get the {element, count} value, extract the element name, update the count value and then use map.set(key, {element, count}) to update the map. If the key doesn't exist, create a new one.

You would still need to manually create the elements that you are appending the data onto - though you could, perhaps, automate the creation of those as well if it is a new key?

answered Sep 18, 2020 at 10:08

ATD

1,3641 gold badge7 silver badges8 bronze badges

Collectives™ on Stack Overflow

Automatically create variable names from results?

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