jsで値がない時の処理について

Question

前提・実現したいこと

値がない時に処理がスルー？されてしまう状態を解消したい。

formからの値を取得してそれに該当するjsonデータをresultsに格納しています。
この状態でformは全てradioボタンなのですが、全てチェックした場合は正常に表示されるのですが、
１つでもチェックがないresultsが空になってしまいます。
この場合にチェックがない状態でもうまく.filterを処理させたいです。
ブラグインはUnderscore.jsを使用しています。

該当のソースコード

var value_type = $('[name=type]:checked').val();
var value_color = $('[name=color]:checked').val();

var results = _.chain(dataArray)
  .filter(it => it.type === value_type)
  .filter(it => it.color === value_color)
  .value();

{
    "test":[
        {
            "name":"aaa",
            "type":"1",
            "color":"red"
        },
        {
            "name":"bbb",
            "type":"1",
            "color":"blue"
        },
        {
            "name":"ccc",
            "type":"2",
            "color":"blue"
        },

試したこと

_.chain()内でif文が書ければと思ったのですが、エラーになりました。

if (value_fee == '') {
    null
  } else {
    var results = _.chain(dataArray).filter(it => it.fee === value_fee).value();
    var dataArray = results;
  }

上記は同じ記述を何回も書くはめになるうえに、２個以上書くとエラーになりました。

ご教示宜しくお願いします。

Answer 1

１つでもチェックがないresultsが空になってしまいます。

ラジオにチェックが入ってない場合、各値はありませんよね。
初期値を設定してこんな感じにするのはいかが？

// || 値という書き方で左辺がfalseや空文字等の値であれば右辺が適用されます
var value_type = $('[name=type]:checked').val() || 'ALL';
var value_color = $('[name=color]:checked').val() || 'ALL';

// 一度何が入っているのか確認してみてください
console.log(value_type);
console.log(value_color);

var results = _.chain(dataArray)
  .filter(it => value_type ==='ALL' || it.type === value_type)
  .filter(it => value_color === 'ALL' || it.color === value_color)
  .value();

Comments

[MeB]

ご回答ありがとうございます！
こんな書き方があるのですね…。うまく取ることができました。

[MeB]

すみません。
<input type="radio" id="type01" name="type" value="2,1"><label for="cash01">2か1</label>
上記のような場合も適用できますでしょうか？

$('[name=type]:checked').val();
document.getElementsByName('type01').value.split(',');
この二つを合わせた感じです。
チェックされたものvalueの値を2と１で取る感じです。

[MeB]

すみません。全く別の質問ですね…。

[miyabi-sun]

こちらは過去の質問があるので、そちらに回答ぶら下げておきますね。

[MeB]

あ、今新しく質問してしまいました…。
削除申請を出しておきます。
わざわざありがとうございます。