【JavaScript】ネストしたオブジェクトのキーをドット記法に変換して一階層にまとめる

 具体的に何をするかというと次の感じです。

const input = {
  name: "浜松太郎",
  residence: {
    fullAddress: "静岡県浜松市中区富塚町1933-1 佐鳴湖パークタウンサウス2F",
    coordinates: {
      lat: 34.721961,
      lng: 137.699308
    }
  }
}
;
// 一階層にまとめる関数にかける
const output = flattenObject(input);
console.log(JSON.stringify(output, null, 2))
/*
{
  "name": "浜松太郎",
  "residence.fullAddress": "静岡県浜松市中区富塚町1933-1 佐鳴湖パークタウンサウス2F",
  "residence.coordinates.lat": 34.721961,
  "residence.coordinates.lng": 137.699308
}
 */

 オブジェクトのプロパティにオブジェクトを持つような場合でも一次元連想配列的な値として扱いた時に使います。ライブラリや外部APIなど何らかの都合により一次元でオブジェクトを扱わなければならない時に便利です。

 具体的には次の様にできます。

/**
 * オブジェクトのネストされたキーと値をフラットに変換する関数。
 * 再帰的にオブジェクトを読んでフラットにする。
 *
 * @param {Object} obj - フラットに変換するオブジェクト
 * @param {string} parentKey - 上位のキー(再帰呼び出しのためのもの)
 * @returns {Object} - フラットに変換されたオブジェクト
 */
const flattenObject = (obj, parentKey = '') => {
  let flattened = {}; // 変換結果を入れるためのオブジェクトを初期化

  // オブジェクトのキーを一つずつ処理する
  for (const key of Object.keys(obj)) {
    // 新しいキー名を生成。再帰で親キーが渡された場合はそれを.でつなぐ
    const newKey = parentKey ? `${parentKey}.${key}` : key;

    // キーの値がオブジェクトである場合(ネストしている場合)
    if (typeof obj[key] === 'object' && obj[key] !== null) {
      // 再帰的にオブジェクトをフラットにする
      const childFlattened = flattenObject(obj[key], newKey);
      // フラット化されたオブジェクトに既存の結果にマージする
      flattened = { ...flattened, ...childFlattened };
    } else {
      // キーの値がオブジェクトでない場合は、新しいキーで既存の結果に追加する
      flattened[newKey] = obj[key];
    }
  }

  return flattened; // フラットに変換されたオブジェクトを返す
};

 あらかじめ返り値のためのオブジェクトを用意しておき、渡されたオブジェクトがプロパティにオブジェクトを持っていないならばそのままに混ぜる、持っているならばそのプロパティ名を前置詞にしてオブジェクトを展開して混ぜる、というのを再帰的に繰り返す感じです。フォームに関連するライブラリなど一次元オブジェクトでなければならない時はしばししばあり、そういった時にこの様な変換をかけると処理しやすいです。

>株式会社シーポイントラボ

株式会社シーポイントラボ

TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:〒432-8003
   静岡県浜松市中央区和地山3-1-7
   浜松イノベーションキューブ 315
※ご来社の際はインターホンで「316」をお呼びください

CTR IMG