[underscore(アンダースコア)のwhereで理想の結果が取得できない]

Question

[前提]
・画面にプルダウンが2つある
・DBのtest_tableというテーブルからcategoryId、categoryName、id、nameを取得
・ひとつめのプルダウンにcategoryId、categoryNameを使用して表示させている
(例)
<option value="test_tableのcategoryId" name="test-table-category-id">test_tableのcategoryName<option>
<option value="2" name="test-table-category-id">かてごり２<option>

[やりたい事]
whereを使用してプルダウンで選択したcategoryIdとDBから取得したtest_tableのcategoryIdを比較し、
一致したものを返す

// プルダウンで選択したidの取得
var testTableCategoryId = $('[name=test-table-category-id]:checked').val();
  // optionタグのname="test-table-category-id"
  console.info(testTableCategoryId);
  // 取得結果 => 2 
  // プルダウンで選んだIDの取得OK

var testTable = DBからtest_tableのcategoryId、categoryName、id、nameをとってくる処理;
  console.info(JSON.stringify(testTable));
  // test_tableのcategoryId、categoryName、id、nameを取得
  // 取得結果 => [{"categoryId":1, "categoryName":"かてごり１", "Id":1, "name":"なまえ１"},
  //             {"categoryId":1, "categoryName":"かてごり１", "Id":2, "name":"なまえ２"},
  //             {"categoryId":2, "categoryName":"かてごり２", "Id":3, "name":"なまえ３"},
  //             {"categoryId":2, "categoryName":"かてごり２", "Id":4, "name":"なまえ４"}...]

// testTableのCategoryIdとプルダウンから選んだCategoryIdから一致したものを配列で返す
var list = _.where(testTable, {testTableCategoryId : testTableCategoryId});
  console.info(list);
  // 取得結果 => []
  // 空の配列が返ってくる

  // 理想の取得結果
  // [{"categoryId":2, "categoryName":"かてごり２", "Id":3, "name":"なまえ３"},
  // {"categoryId":2, "categoryName":"かてごり２", "Id":4, "name":"なまえ４"}]

Answer 1

val()で取得した値は、その時点では文字列型です。
データベースのIDは数値型で格納されているので、型を合わせる必要があります。
型が違うので、データベースにない値を探していたことになり、空の配列が返ってきていました。

文字列 → 数値 に変換するために、今回は×1をする方法を利用しています。
parseInt(testTableCategoryId)など、方法はいくつかあるので興味があれば調べてください。

余談ですが、$('option:checked').val() ではなく $('select').val() で現在選択している値が取れます。

<select name="test-table-category" id="">
  <option value="1" name="test-table-category-id">かてごり１</option>
 <option value="2" name="test-table-category-id">かてごり２</option>
</select>

// 該当のselectを取得
var $select = $('[name=test-table-category]');

/* 選択した値を取得。
取得した時点では、文字列'1'なので、同時に数値の1に変換。
*/
var testTableCategoryId = $select.val() * 1;

console.log(testTableCategoryId); // 1

// データベースから取得する過程は省略
var testTable = [{"categoryId":1, "categoryName":"かてごり１", "Id":1, "name":"なまえ１"},
              {"categoryId":1, "categoryName":"かてごり１", "Id":2, "name":"なまえ２"},
              {"categoryId":2, "categoryName":"かてごり２", "Id":3, "name":"なまえ３"},
              {"categoryId":2, "categoryName":"かてごり２", "Id":4, "name":"なまえ４"}];

var list = _.where(testTable, {categoryId : testTableCategoryId});
console.info(list);

// 結果
// [{"categoryId":1, "categoryName":"かてごり１", "Id":1, "name":"なまえ１"},
// {"categoryId":1, "categoryName":"かてごり１", "Id":2, "name":"なまえ２"}]

Answer 2

// testTableのCategoryIdとプルダウンから選んだCategoryIdから一致したものを配列で返す
var list = _.where(testTable, {testTableCategoryId : testTableCategoryId});
とありますが、比較条件が
_.where(testTable, {categoryId : testTableCategoryId});
ではないでしょうか？