JavaScriptで他のプロパティの値に基づいてネストされたJSONプロパティへアクセスする方法
JavaScriptでは、「subjectName」などあるプロパティの値をもとに、同じオブジェクト内の別のプロパティ(この例では「marks」)へアクセスしたいケースはよくあります。その場合は、ループ処理と条件分岐を組み合わせることで簡単に実現できます。具体的なコードを見ていきましょう。
コード例
var actualJSONData = JSON.parse(studentDetails()),
studentMarks = getMarksUsingSubjectName(actualJSONData, "JavaScript");
console.log("学生の点数=" + studentMarks);
function getMarksUsingSubjectName(actualJSONData, givenSubjectName){
for(var tempObj of actualJSONData){
if(tempObj.subjectName === givenSubjectName){
return tempObj.marks;
}
}
}
function studentDetails(){
return JSON.stringify(
[
{ firstName : "John", subjectName: "JavaScript", marks : 97 },
{ firstName : "David", subjectName: "Java", marks : 98 }
]
);
}コードの解説
まずstudentDetails()関数が、学生情報を格納したオブジェクトの配列をJSON文字列として返します。この文字列をJSON.parse()でパースすることで、JavaScriptで操作可能な配列に変換しています。
続いてgetMarksUsingSubjectName()関数の中で、for...ofループを使い配列内の各オブジェクトを順番にチェックします。subjectNameプロパティが引数で渡された科目名と一致するかどうかを厳密等価演算子===で比較し、一致した時点でそのオブジェクトのmarksプロパティの値をreturn文で返します。
なお、条件式では必ず比較演算子===を使用してください。誤って代入演算子=を使うと、値の比較ではなく代入が行われ、常に最初のオブジェクトが返されるなど意図しない動作になるので注意しましょう。
プログラムの実行方法
上記のプログラムを実行するには、Node.js環境で次のコマンドを使用します。
node fileName.js
ここでは、ファイル名をdemo155.jsとして保存したものとして進めます。
実行結果
実行すると、コンソールには以下のような出力が表示されます。
PS C:\Users\Amit\JavaScript-code> node demo155.js 学生の点数=97
このように、「JavaScript」という科目名をキーにして、該当する学生の点数である97を正しく取得できていることがわかります。同様の手法は、APIから取得したJSONデータの検索やフィルタリングなど、さまざまな場面で応用できます。
-
JavaScript:ネストされた配列をもとに入れ子の順序なしリスト(ul)を作成するには?
例えば、次のように文字列と配列が混在したネストされた配列があるとします。const arr = [ Value 1, [Inner value 1, Inner value 2, Inner value 3, Inner value 4], Value 2, Value 3, Value 4, Value 5, Value 6 ];このような任意のネストされた配列を受け取り、その構造に合わせてHTMLの順序なしリスト(ul)へ変換するJavaScriptプログラムを作成してみましょう。ここで注意すべきポイントはただ一つ、生成されるulのネスト構造が、元の配列のネスト構造と完全に
-
JavaScriptでCSSプロパティの現在の値を取得する方法|getComputedStyleの使い方
JavaScriptでHTML要素に適用されているCSSプロパティの現在の値(計算済みスタイル)を取得するには、window.getComputedStyle()メソッドを使用します。このメソッドは、対象の要素に適用されたすべてのスタイル情報を含むオブジェクトを返します。返されたオブジェクトに対してgetPropertyValue()メソッドを呼び出せば、任意のCSSプロパティの値を文字列として取得できます。インラインスタイルが設定されていない場合でも、外部CSSや継承によって最終的に適用されている値を取得できるのが大きな特徴です。基本構文const element = document.qu