【JavaScript】空の値を含むIDリストから特定のIDのレコードを取得する方法
JavaScriptでは、filter()メソッドを使うことで、空文字列("")やnullなどが混在するIDのリストから、特定のIDを持つレコードだけを簡単に抽出できます。
ここでは、filter()と厳密等価演算子(===)を組み合わせた実践的な方法を紹介します。
サンプルデータ
まず、次のようなオブジェクトの配列を用意します。このリストには、有効なIDだけでなく、空文字列やnullも含まれています。
var details = [
{id: 101, name: "John", age: 21},
{id: 111, name: "David", age: 24},
{id: 1, name: "Mike", age: 22},
{id: "", name: "Sam", age: 20},
{id: 1, name: "Carol", age: 23},
{id: null, name: "Robert", age: 25},
{id: 1, name: "Adam", age: 24},
{id: "", name: "Chris", age: 23}
];filter()で特定のIDを抽出する
filter()メソッドは、コールバック関数がtrueを返した要素だけを集めた新しい配列を生成します。ここでは「idが1と厳密に等しいオブジェクト」を条件として指定します。
var details = [
{id: 101, name: "John", age: 21},
{id: 111, name: "David", age: 24},
{id: 1, name: "Mike", age: 22},
{id: "", name: "Sam", age: 20},
{id: 1, name: "Carol", age: 23},
{id: null, name: "Robert", age: 25},
{id: 1, name: "Adam", age: 24},
{id: "", name: "Chris", age: 23}
];
var getIdWithValue1 = details.filter(obj => obj.id === 1);
console.log(getIdWithValue1);プログラムの実行方法
上記のプログラムを実行するには、Node.js環境で次のコマンドを使用します。
node fileName.js
ここでは、ファイル名をdemo181.jsとして保存した場合の例を示します。
実行結果
プログラムを実行すると、以下のような出力が得られます。
PS C:\Users\Amit\javascript-code> node demo181.js
[
{ id: 1, name: 'Mike', age: 22 },
{ id: 1, name: 'Carol', age: 23 },
{ id: 1, name: 'Adam', age: 24 }
]ポイント解説
- 厳密等価演算子(
===)の使用:==ではなく===を使うことで、型の暗黙的な変換を防ぎ、意図しないマッチングを回避できます。 - 空の値の自動除外: 空文字列(
"")やnullは1と一致しないため、条件を満たさず自動的に除外されます。 - 元の配列は変更されない:
filter()は新しい配列を返すため、元のdetails配列はそのまま保持されます。
このように、filter()を使えば、不完全なデータが混在する配列からでも、安全かつ簡潔に目的のレコードを取得できます。
-
JavaScript(jQuery)でJSONを解析して特定の名前と値のペアを表示する方法
JSONの解析にはparseJSON()を使用 jQueryでJSON文字列を解析(パース)するには jQuery.parseJSON() を使用します。そして、解析したオブジェクトから特定の名前と値のペアを取り出して表示したい場合は、$.each() 関数が便利です。 まず、例として次のようなJSONデータを用意し、これを解析してみましょう。 const APIData = [{Name:John,Age:21},{Name:David,Age:24},{Name:Bob,Age:20}]; const getObject = jQuery.parseJSON(APIData); APIDa
-
JavaScriptでUL(順序なしリスト)に改行付きで項目を追加する方法
順序なしリスト(UL)に新しい項目を改行付きで追加するには、document.querySelector()とappend()メソッドを組み合わせて使用します。ユーザーが入力した値をli要素として動的にリストへ追加することで、各項目が新しい行に表示されます。以下に具体的なサンプルコードを示します。サンプルコード<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" co