i'm trying to make a url checker with js, this is the part of the code i'm having trouble with:

switch (true) {
    case document.location.pathname.includes("/account"):
      presenceData.details = "Viewing account..."
    break
    case document.location.pathname.includes("/mylist"):
      presenceData.details = "Viewing list..."
    break
    }
}

the url I am working with is {example.com}/account/profiles/mylist and when I test /mylist it keeps showing me "Viewing account..." what can I change to make /account not interfer /mylist?

CodePudding user response：

The problem here is that {example.com}/account/profiles/mylist contains both the strings "/account" and "/mylist". So when you hit your first case, a match is made, and then you break out of the switch.

let pathname = '/account/profiles/mylist';
switch (true) {
  case pathname.includes("/account"):
    console.log("Viewing account...");
    break;
  case pathname.includes("/mylist"):
    console.log("Viewing list...");
    break;
}

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

If you know that /mylist is always going to be deeper in the hierarchy, beneath /account, you could just switch the order of the cases:

let pathname = '/account/profiles/mylist';
switch (true) {
  case pathname.includes("/mylist"):
    console.log("Viewing list...");
    break;
  case pathname.includes("/account"):
    console.log("Viewing account...");
    break;
}

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

Otherwise, you may need a more nuanced logic approach, and you may wish to avoid using switch statements in favor of if/else statements, as there are some peculiarities to a switch (specifically, that once a single case is met all other case blocks will be interpreted as matching until you break).

EDIT:

OR, another alternative would be to leverage endsWith instead:

let pathname = '/account/profiles/mylist';
switch (true) {
  case pathname.endsWith("/account"):
    console.log("Viewing account...");
    break;
  case pathname.endsWith("/mylist"):
    console.log("Viewing list...");
    break;
}

<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

FULL DISCLOSURE -- as I was typing this edit esqew posted the same solution.

CodePudding user response：

Why not use endsWith() instead...?

switch (true) {
    case document.location.pathname.endsWith("/account"):
      presenceData.details = "Viewing account..."
    break
    case document.location.pathname.endsWith("/mylist"):
      presenceData.details = "Viewing list..."
    break
    }
}

Tangential, but switch statements are (IMO) outdated and become difficult to read/maintain (considering the necessity of breaking every condition); additionally, your use of switch (true) is somewhat abusing what a switch is meant to accomplish. You probably should be simply using if/else if statements anyway:

if (document.location.pathname.endsWith("/account")) {
    presenceData.details = "Viewing account...";
}
else (document.location.pathname.endsWith("/mylist")) {
    presenceData.details = "Viewing list...";
}