javascript - using if statement for multiple conditions vs switch case

Question

I have a situation where I want to write something along the lines of this to check the page urls for a string.

url example 1 - http://something.com/else/apples
url example 2 - http://something.com/else/oranges
url example 3 - http://something.com/else/bananas
...
url example 10 - http://something.com/else/kiwis

pseudo code:

if(window.location.href.indexOf('apples')>-1)
{
    alert('apples');
}
if(window.location.href.indexOf('oranges')>-1)
{
    alert('oranges');
}
....

As you can see it looks rather ugly to have multiple if statements so I'm looking for some advice on how to achieve this using a single if statement or possible a switch case. I had an idea about an if statement with several 'OR' statements, but I'm not sure if that's the best way of going about with this.

Thank you

What if you get the end of the url and put that in the alert? That way you have no ifs at all. Edit: Chris already made a one-liner solution. — nonzaprej
– nonzaprej, Commented May 4, 2017 at 13:51
If you intend to perform the same action regardless of the string, as implied by your example, then create a function that accepts the string to search for. That way you only need it once. No switch or multiple if statements. — Chris G. Williams
– Chris G. Williams, Commented May 4, 2017 at 13:51
Yes I intend to perform the same action, but would the string look something like this? '/something/apples, /something-else/bananas, /other/fruits' — user5396759
– user5396759, Commented May 4, 2017 at 13:59
switch acts the same as if it is used to increase readability of code — grzesiekmq
– grzesiekmq, Commented May 4, 2017 at 14:47

Purefan · Accepted Answer · 2017-05-04 13:50:38Z

4

Something like this?

let urls = ["url1.com", "url2.com"]

urls.forEach((url) => {
    if (window.location.href.indexOf(url) > -1) {
        alert("Do something")
    }
})

The idea is to use an array instead of many variables, and to loop through its items with forEach

answered May 4, 2017 at 13:50

Purefan

1,50626 silver badges46 bronze badges

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

Comments

rishipuri · Accepted Answer · 2017-05-04 14:06:11Z

1

Like this?

var fruits = ['apples', 'oranges', 'bananas'];

var link = window.location.href.split("/").pop();

if (fruits.includes(link)) {
   alert(link);
}

answered May 4, 2017 at 14:06

rishipuri

1,52811 silver badges18 bronze badges

1 Comment

Erazihel Over a year ago

Be careful with that, .includes is an ES7 feature.

Chris · Accepted Answer · 2017-05-04 13:50:56Z

0

Like this?

alert(window.location.href.split("/").pop());

This takes whatever comes after the last / and alerts that. Of course, this will alert anything. If there is a "whitelist" of things to alert, then @Purefan might have a better solution. This is just the quick-'n-easy solution.

answered May 4, 2017 at 13:50

Chris

59.7k20 gold badges121 silver badges144 bronze badges

8 Comments

Erazihel Over a year ago

This isn't what it was asked for.

Chris Over a year ago

@Erazihel, it kind of is actually. It will always alert the last bit of the URL which is basically what OP does. However, as I explain, if there are scenarios a URL might not contain a fruit or whatever, then Purefan has the better solution.

Domino Over a year ago

I'm pretty sure the alert is a pure example in place of the actual code. So your code has nothing to do with the question.

Chris Over a year ago

@JacqueGoupil, okay so you just put that in a variable and use that instead in the "actual code". I don't see the problem?

Erazihel Over a year ago

@Purefan has a solution than answer perfectly the needs of OP. Your answer is clearly invalid. You should delete it.

|

Adjit · Accepted Answer · 2017-05-04 14:00:22Z

0

If you need to output specific information based on what the URL says, then I would suggest maybe using JSON to get information quickly. This will allow you to avoid having to use a loop or any conditional statements, and you can essentially get any information you want. That information can even contain an HTML page/element to be loaded in -

var pageInfo = {
  "apple": "some info about apples",
  "orange": "some other info about oranges",
  "banana": "more banana information"
}

var urlPage = window.location.href.split("/").pop();

var info = pageInfo[urlPage];

//to test -
console.log(pageInfo["apple"]);
console.log(pageInfo["orange"]);
console.log(pageInfo["banana"]);

answered May 4, 2017 at 14:00

Adjit

10.3k13 gold badges57 silver badges102 bronze badges

Comments

Domino · Accepted Answer · 2017-05-04 14:05:03Z

0

What you're trying to do is map specific values to specific outcomes. You can do this with an actual map. You can associate anything to values in a map, even functions. Then, use your favorite way to loop across the object. Here's a silly example:

var fruitMap = {
  'oranges': 'I don\'t like those.',
  'apples': 'Three a day keeps the doctor away.'
};

for (var fruit in fruitMap) {
  if (window.location.href.indexOf(fruit) > -1) {
    alert(fruitMap[fruit]);
  }
}

answered May 4, 2017 at 14:05

Domino

6,8781 gold badge37 silver badges61 bronze badges

Comments

grzesiekmq · Accepted Answer · 2017-05-04 15:33:48Z

0

switch acts the same as if it is used to increase readability of code

$('#fruit').keyup(function() {

  var c = $(this).val();
  var fruits = ['apple', 'banana', 'pear', 'orange', 'raspberry', 'strawberry', 'wildberry', 'cranberry', 'blueberry', 'limone', 'grapefruit', 'kiwi', 'mango'];

  for (var i = 0; i < fruits.length; i++) {
    switch (c) {
      case fruits[i]:
        console.log(fruits[i]);
        break;
      default:
        '';
        break;
    }
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Enter a fruit: <input type="text" id="fruit">

edited May 4, 2017 at 15:33

answered May 4, 2017 at 15:04

grzesiekmq

4491 gold badge6 silver badges17 bronze badges

Collectives™ on Stack Overflow

javascript - using if statement for multiple conditions vs switch case

6 Answers 6

Comments

1 Comment

8 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

1 Comment

8 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related