ネストされた JSON オブジェクトの値の取得をマスターする

はじめに

この実験では、キーの配列に基づいて JSON オブジェクトからネストされた値を取得する方法を探ります。オブジェクトのネスト構造をトラバースし、ターゲット値を取得するために reduce() メソッドを使用します。この実験が終了すると、複雑な JSON オブジェクト内の特定の値にアクセスする方法をより深く理解しているでしょう。

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL javascript(("JavaScript")) -.-> javascript/BasicConceptsGroup(["Basic Concepts"]) javascript(("JavaScript")) -.-> javascript/AdvancedConceptsGroup(["Advanced Concepts"]) javascript/BasicConceptsGroup -.-> javascript/variables("Variables") javascript/BasicConceptsGroup -.-> javascript/data_types("Data Types") javascript/BasicConceptsGroup -.-> javascript/arith_ops("Arithmetic Operators") javascript/BasicConceptsGroup -.-> javascript/comp_ops("Comparison Operators") javascript/BasicConceptsGroup -.-> javascript/array_methods("Array Methods") javascript/AdvancedConceptsGroup -.-> javascript/higher_funcs("Higher-Order Functions") subgraph Lab Skills javascript/variables -.-> lab-28264{{"ネストされた JSON オブジェクトの値の取得"}} javascript/data_types -.-> lab-28264{{"ネストされた JSON オブジェクトの値の取得"}} javascript/arith_ops -.-> lab-28264{{"ネストされた JSON オブジェクトの値の取得"}} javascript/comp_ops -.-> lab-28264{{"ネストされた JSON オブジェクトの値の取得"}} javascript/array_methods -.-> lab-28264{{"ネストされた JSON オブジェクトの値の取得"}} javascript/higher_funcs -.-> lab-28264{{"ネストされた JSON オブジェクトの値の取得"}} end

キーの配列を使ってオブジェクト内のネストされた値を取得する方法

ネストされた JSON オブジェクトから特定の値を取得するには、deepGet 関数を使用できます。この関数はオブジェクトとキーの配列を受け取り、オブジェクト内に存在する場合にはターゲット値を返します。

deepGet 関数を使用するには：

ネストされた JSON オブジェクトから取得したいキーの配列を作成します。
オブジェクトとキーの配列を使って deepGet 関数を呼び出します。
関数は存在する場合にはターゲット値を返し、存在しない場合には null を返します。

以下は deepGet 関数のコードです：

const deepGet = (obj, keys) =>
  keys.reduce(
    (xs, x) => (xs && xs[x] !== null && xs[x] !== undefined ? xs[x] : null),
    obj
  );

以下は deepGet 関数の使い方の例です：

let index = 2;
const data = {
  foo: {
    foz: [1, 2, 3],
    bar: {
      baz: ["a", "b", "c"]
    }
  }
};
deepGet(data, ["foo", "foz", index]); // 3 を返す
deepGet(data, ["foo", "bar", "baz", 8, "foz"]); // null を返す

コーディングの練習を始めるには、ターミナル/SSH を開いて node と入力します。

まとめ

おめでとうございます！キーの配列に基づくオブジェクト内のネストされた値を取得する実験を完了しました。スキルを向上させるために、LabEx でさらに多くの実験を行って練習できます。