Simplifying if else statements

Question

Hi I have a json data as below:

{
    "details":
        {
            "data1": 
                {
                    "monthToDate":1000,                   
                    "firstLastMonth":"December",
                    "firstLastMonthAmount":5000,
                    "secondLastMonth":"November",
                    "secondLastMonthAmount":12000
                },
            "data2":
                {
                    "monthToDate":4000,                   
                    "firstLastMonth":"December",
                    "firstLastMonthAmount":10000,
                    "secondLastMonth":"November",
                    "secondLastMonthAmount":15000
                },
           "data3":
                {
                    "monthToDate":2000,                   
                    "firstLastMonth":"December",
                    "firstLastMonthAmount":8000,
                    "secondLastMonth":"November",
                    "secondLastMonthAmount":12000
                }
        }   
}

And I have typescript if statements below,

....
Object.values(data.details.data1).map(obj => {
                if (obj === 'January') {
                    xAxisTranslatedArray.push(this.JAN);
                } else if (obj === 'February') {
                    xAxisTranslatedArray.push(this.FEB);
                } else if (obj === 'March') {
                    xAxisTranslatedArray.push(this.MAR);
                } else if (obj === 'April') {
                    xAxisTranslatedArray.push(this.APR);
                } else if (obj === 'May') {
                    xAxisTranslatedArray.push(this.MAY);
                } else if (obj === 'June') {
                    xAxisTranslatedArray.push(this.JUN);
                } else if (obj === 'July') {
                    xAxisTranslatedArray.push(this.JUL);
                } else if (obj === 'August') {
                    xAxisTranslatedArray.push(this.AUG);
                } else if (obj === 'September') {
                    xAxisTranslatedArray.push(this.SEP);
                } else if (obj === 'October') {
                    xAxisTranslatedArray.push(this.OCT);
                } else if (obj === 'November') {
                    xAxisTranslatedArray.push(this.NOV);
                } else if (obj === 'December') {
                    xAxisTranslatedArray.push(this.DEC);
                }
            });

Am using lodash, highcharts and i18n translations. So each of my this.MONTH is i18n keys. I can't directly pass the values since not able to translate them. So I needed to push to an array each values and pass into highchart's X-axis. My question is basically when I see the if else statements it looks too long and kind of repetitive. Is there any short cut here? Thanks in advance guys.

Answer 1

Use a separate map object:

const months = {
    January: this.JAN,
    February: this.FEB,
    March: this.MAR,
    // etc,
}

Object.values(data.details.data1).forEach(obj => {
    if (months[obj]) {
        xAxisTranslatedArray.push(months[obj]);
    }
});

Alternatively, you can replace the if with a filter :

Object.values(data.details.data1)
    .filter(obj => months[obj])
    .forEach(obj => xAxisTranslatedArray.push(months[obj]));

Also, note that I'm using forEach instead of map . map is used to modify an array, but you're only iterating over an array. forEach is the semantically correct choice there.

Answer 2

You have to use bracket notation.

Also, use substring or slice methods in order to get first three characters.

Also, don't forget to check if obj is a string .

var months = [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ];
if(typeof obj === 'string' && months.includes(obj))
    xAxisTranslatedArray.push(this[obj.substring(0,3).toUpperCase()]);

Answer 3

You can use a map definition, like so:

let mapping = {};
mapping['January'] = this.JAN;
... // rest of definitions.


Object.values(data.details.data1).forEach(obj => {
              if(mapping[obj]){
                  xAxisTranslatedArray.push(mapping[obj]);
              });

Answer 4

Seems like obj 's first three characters converted to uppercase is what you want as a key, try

var monthArray = [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ];
Object.values( data.details.data1 ).forEach(obj => {
   if ( monthArray.indexOf( obj ) != -1 )
   {
      xAxisTranslatedArray.push(this[ obj.substring(0,3).toUpperCase() ]);
   }
});