[javascript] ネストの深いオブジェクトをフラットな連想配列に変換したい

Question

前提・実現したいこと

ネストの深いオブジェクトをフラットな連想配列に変換したい

具体的には

{
  '1/1': {
    1000: {
      'a': 0,
      'b': 0,
    }
  },
  '1/2': {
    1000: {
      'a': 0,
      'b': 0,
    }
  },
};

を

[
  {
    "date": "1/1",
    "code": "1000",
    "item": "a",
    "value": 0
  },
  {
    "date": "1/1",
    "code": "1000",
    "item": "b",
    "value": 0
  },
  {
    "date": "1/2",
    "code": "1000",
    "item": "a",
    "value": 0
  },
  {
    "date": "1/2",
    "code": "1000",
    "item": "b",
    "value": 0
  }
]

に変換したいです。

発生している問題・エラーメッセージ

よいところまではいってる気がするのですが、配列のIndexが邪魔してできません。。。

const obj = {
  '1/1': {
    1000: {
      'a': 0,
      'b': 0,
    }
  },
  '1/2': {
    1000: {
      'a': 0,
      'b': 0,
    }
  },
};

const res = Object.entries(obj).map(([date, dateValues]) => {
  return {
    ...Object.entries(dateValues).map(([code, codeValues]) => {
      return {
        ...Object.entries(codeValues).map(([item, itemValue]) => {
          return {
            date,
            code,
            item,
            value: itemValue,
          };
        }),
      };
    }),
  };
});


console.log(res)

// [{
//   "0": {
//     "0": {
//       "date": "1/1",
//       "code": "1000",
//       "item": "a",
//       "value": 0
//     },
//     "1": {
//       "date": "1/1",
//       "code": "1000",
//       "item": "b",
//       "value": 0
//     }
//   }
// }, {
//   "0": {
//     "0": {
//       "date": "1/2",
//       "code": "1000",
//       "item": "a",
//       "value": 0
//     },
//     "1": {
//       "date": "1/2",
//       "code": "1000",
//       "item": "b",
//       "value": 0
//     }
//   }
// }] 

どうすればよいですか？

Answer 1

フラットにしたいなら map 使うより reduce 使った方がいいです。

const res = Object.entries(obj).reduce((result, [key1, value1]) => {
  const result2 = Object.entries(value1).reduce((result2, [key2, value2]) => {
    const items = Object.entries(value2).map(([key3, value3]) => ({
      date: key1,
      code: key2,
      item: key3,
      value: value3,
    }));

    result2.push(...items);
    return result2;
  }, []);

  result.push(...result2);
  return result;
}, []);

console.log(res);

Comments

[TuTettuuu]

なるほど、、勉強になります。

Answer 2

const data={
  '1/1': {
    1000: {
      'a': 0,
      'b': 0,
    }
  },
  '1/2': {
    1000: {
      'a': 0,
      'b': 0,
    }
  },
};
let item,value,date,code;
const res=Object.entries(data).map(
  x=>Object.entries((date=x[0],x[1])).map(
    x=>Object.entries((code=x[0],x[1])).map(
      x=>(item=x[0],value=x[1],{item,value,code,date})
      )
    ).flat()
  ).flat();
console.log(res);

Answer 3

indexが邪魔であればObject.entries(～)で回さずに、Object.keys(～)で回した方が良いかもですね。

Object.keys(obj).forEach((date) => {
  Object.keys(obj[date]).forEach((code) => {
    Object.keys(obj[date][code]).forEach((item) => {
      console.log(obj[date][code][item]); // value部分
    });
  });
});

私の方でも検証コードを書いて動く事は確認済みなので頑張ってみて下さい。

Answer 4

連想配列ではなく、配列を作ってそこに格納する形でどうでしょう？

const obj = {
  '1/1': {
    1000: {
      'a': 0,
      'b': 0,
    }
  },
  '1/2': {
    1000: {
      'a': 0,
      'b': 0,
    }
  },
};

let result = [];
const res = Object.entries(obj).forEach(([date, dateValues]) => {
    Object.entries(dateValues). forEach(([code, codeValues]) => {
        Object.entries(codeValues). forEach(([item, itemValue]) => {
          result.push({
            date,
            code,
            item,
            value: itemValue,
          });
        })
    })
});