URLパラメータの値を、 switch文で条件分岐させたい

Question

【やりたいこと】
Webサイト構築につきましてのご質問です。
あらかじめ設定したURLパラメータの値を
switch文で条件分岐させたいのです。

パラメータ設定が
…/?category=tokyo　…の場合 webページ上に「東京です。」　

パラメータ設定が
…/?category=apple　…の場合 webページ上に「リンゴです。」

…と、ページ上で文字列の表記を
以下の実装によって再現したいのです。　

↓

【実装例】

例：パラメータの値を【apple】と【tokyo】の2つに設定した場合。
https://teratail.com/?category=apple&category=tokyo

（１）
//現在のURLパラメータを取得
var urlParam = location.search.substring(1);

// URLにパラメータが存在する場合
if(urlParam) {
// 「&」が含まれている場合は「&」で分割
var param = urlParam.split('&');

// パラメータを格納する用の配列を用意
var paramArray = [];

// 用意した配列にパラメータを格納
for (i = 0; i < param.length; i++) {
var paramItem = param[i].split('=');
paramArray[paramItem[0]] = paramItem[1];
}
alert(paramItem[1]);
}

（２）
ここまで設定するとアラート表示(alert(paramItem[1]);)で
「apple」、「tokyo」がそれぞれ格納されることが確認できます。

そこでswitch文で分岐させていきます…。

// 格納したパラメータの値を取得
var test = (paramItem[1]);

switch (test)
{
case "apple":
$('#test').html('リンゴです');
break;

case "tokyo":
$('#test2').html('東京です');
    break;

}

変数"test" と case "apple" が等しいので、
testタグに「リンゴです」と表示されます。

【問題点】
しかし、#test2タグには「東京です」と
同時に表記ができませんでした。

…ここで問題なのですが、
パラメータの値が、【リンゴ】かつ【東京】の
場合、switch文で条件分岐・表示させる式を
どうぞご教授お願い致します。。

ちなみに実装の参考にしたサイトはこちらです。
■JavaScriptでURLのパラメータやアンカーを判断して処理を変更する方法
https://www.tam-tam.co.jp/tipsnote/javascript/post9911.html

以上です。
どうぞよろしくお願いいたします。

Comments

[m.ts10806]

コードはマークダウンのcode機能をご利用ください

[m.ts10806]

ちなみに同名パラメータを渡す場合[]をつけて配列にするのがパラメータの通例です。

Answer 1

switchじゃなく、ifにしたらいいのでは？

// 現在のURLパラメータを配列で取得
// 何もパラメーター無しの時はnull
const urlParamList = location.search.substring(1) !== "" ? location.search.substring(1).split("&") : null

// パラメーターリストが存在する場合
if (urlParamList != null) {
  const paramArray = urlParamList.map(val => val.split("=")[1])
  console.log(paramArray)

  if (paramArray.includes("apple")) {
    $("#test1").html("リンゴです")
  }
  if (paramArray.includes("tokyo")) {
    $("#test2").html("東京です")
  }
}

Comments

[SHO1128]

shou6様
ご回答、ありがとうございました。
感謝申し上げます。

実装してみたところ、
大変メンテナンス性が高そうなので、
ベストアンサーとさせていただきました。

是非、使わせていただきます。
この度は、ご教授ありがとうございました。

今後とも
どうぞよろしくお願いいたします。

Answer 2

switchということなんで。

const urlParam = "category=apple&category=tokyo";
const paramArray = urlParam.split("&").map(e=>e.split("=")[1]);

switch(true) {
  case paramArray.includes("apple"):
    console.log("りんご");
  case paramArray.includes("tokyo"):
    console.log("東京");
}

consoleみていただくと、両方出力されると思います。

Comments

[SHO1128]

papinianus様
ご回答ありがとうございます。

switch(true)
という使い方を勉強させていただきました。
是非、今後の参考にさせていただきます。
ありがとうございました。

しかし、switch制御すると言った手前、
やはりif文で制御することにいたしました。
勝手ながら申し訳ありません。

今後とも
どうぞよろしくお願いいたします。

[papinianus]

switch(true)は賛否ありますし、特にコーディング規約とか、こうしたいというポリシーがなければ使わないほうがいいと思います。
さらに、この例では、フォールスルーもしていますので、良くないです。
私がメンテナンスしているコードにこういうのがでてきたら、ifに書き直すと思います。

[SHO1128]

papinianus様
ご返信ありがとうございます。

> switch(true)は賛否ありますし、

今後の参考にさせていただきます。
またこの度は、switch文での実装…という質問とは
異なる回答・解決を出してしまい、
大変失礼いたしました。

今後とも
どうぞよろしくお願いいたします。