javascript - strings in a variable to use as condition for if statement

Question

I'm making a chart where if person visits a country in a region (in this case Asia), make the bar a certain color.

 if (
 d.visitCountry === "China" || d.visitCountry === "Japan" ||
 d.visitCountry === "Afghanistan" || d.visitCountry === "Armenia" || 
 d.visitCountry === "Azerbaijan" || d.visitCountry === "Bangladesh" || 
 d.visitCountry === "Bhutan" || d.visitCountry === "Brunei Darussalam" || 
 d.visitCountry === "Cambodia" || d.visitCountry === "Georgia" || 
 d.visitCountry === "Hong Kong" || d.visitCountry === "India" || 
 d.visitCountry === "Indonesia" || d.visitCountry === "Kazakhstan" || 
 d.visitCountry === "North Korea" || d.visitCountry === "South Korea" || 
 d.visitCountry === "Kyrgyzstan" || d.visitCountry === "Laos" || 
 d.visitCountry === "Macau" || d.visitCountry === "Malaysia" || 
 d.visitCountry === "Maldives" || d.visitCountry === "Mongolia" || 
 d.visitCountry === "Myanmar" || d.visitCountry === "Nepal" || 
 d.visitCountry === "Pakistan" || d.visitCountry === "Singapore" || 
 d.visitCountry === "Sri Lanka" || d.visitCountry === "Taiwan" || 
 d.visitCountry === "Tajikistan" || d.visitCountry === "Thailand" || 
 d.visitCountry === "Timor Leste" || d.visitCountry === "Turkmenistan" || 
 d.visitCountry === "Uzbekistan" || d.visitCountry === "Vietnam") {
     returnColor = "red";
 }

The problem with this method I'm using is it's long and tedious.

Is there any way to make it so it's something like this

var worldRegion = {
 worldRegion.Asia = [ China, Japan, North Korea ... ]
 worldRegion.northAmerica = [USA, Canada, Greenland ... ]
 worldRegion.Africa = [ ... ]

if (d.visitCountry === worldRegion.Asia) /* this is obviously wrong */ {
        returnColor = "red";
}
else if (d.visitCountry === worldRegion.northAmerica) /* this is obviously wrong */ {
        returnColor = "blue";
}
return returnColor;

Obviously that code is wrong though.

Please format your code to make it readable.

jfriend00
– jfriend00

2015-08-03 08:27:47 +00:00
Commented Aug 3, 2015 at 8:27 — jfriend00
– jfriend00, Commented Aug 3, 2015 at 8:27

T.J. Crowder · Accepted Answer · 2015-08-03 08:38:08Z

2

You can do what you're talking about with a bunch of arrays, but I'd probably use an object as a map instead:

var countryColors = {
    China: "red",
    Japan: "red",
    "North Korea": "red",
    // ...
    USA: "blue",
    Canada: "blue",
    Greenland: "blue"
};

Note that properties that have valid literal names can be written literally, but ones that don't have valid literal names (like North Korea, because of the space) are put in quotes. Or you can put them all in quotes for consistency.

Then

returnColor = countryColors[d.visitCountry];

But if you want to do it with a bunch of arrays, use Array#indexOf: If the result is not -1, the entry is there:

if (worldRegion.Asia.indexOf(d.visitCountry) !== -1) {
    returnColor = "red";
}
else if (worldRegion.northAmerica.indexOf(d.visitCountry !== -1) {
    returnColor = "blue";
}
// ...

Side note: If you need to support obsolete browsers like IE8, you may need a shim (polyfill) for Array#indexOf. A search will turn one up. All modern browsers have it built-in.

~~Side note: I'm pretty sure Greenland isn't in North America.~~ What do you know, I'm wrong about that...

edited Aug 3, 2015 at 8:38

answered Aug 3, 2015 at 8:30

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Tactician Jenro Over a year ago

I solved the problem with your second solution - with a bunch of arrays - because that saves time with typing the colors all over again for each country. Thanks!

jfriend00 · Accepted Answer · 2015-08-03 08:31:04Z

You can use an object map to "lookup" the color for a given country name:

var colorMap = {
    "China": "red",
    "Japan": "red",
    // fill in other countries and colors here
    "USA": "blue"
};

function getColor(country) {
    var color = colorMap[country];
    if (!color) {
        // default color
        color = "black";
    }
    return color;
}

By adding a little more complexity to the code, you could group them by color too:

var colorMap = {
    red: ["China", "Japan", "North Korea"],
    blue: ["USA", "Canada", "Greenland"],
    yellow: ["Kenya", "Egypt"]

};

function getColor(country) {
    for (var color in colorMap) {
        if (colorMap[color].indexOf(country) !== -1) {
            return color;
        }
    }
    return "black";
}

Ramireddy Ambati · Accepted Answer · 2015-08-03 08:45:39Z

0

Yes you can do something like what you have done. Below is the working sample for your problem.

function GetColorBasedOnCountry(visitCountry) {
        var worldRegion = { Asia: ["China", "Japan", "North Korea", "India"],
            northAmerica: ["USA", "Canada", "Greenland"],
            Africa: ["SouthAfrica", "Zimbabwe"]
        };

        var returnColor = "";
        if (worldRegion.Asia.indexOf(visitCountry) > -1) {
            returnColor = "red";
        }
        else if (worldRegion.northAmerica.indexOf(visitCountry) > -1) {
            returnColor = "blue";
        }
        else
            returnColor = "green";

        return returnColor;
    }

answered Aug 3, 2015 at 8:45

Ramireddy Ambati

2092 silver badges6 bronze badges

1 Comment

Tactician Jenro Over a year ago

Works perfectly similar to TJ's reply. Thank you!

Collectives™ on Stack Overflow

javascript - strings in a variable to use as condition for if statement

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related