動的にobjectを追加していく方法

Question

実現したいこと

[
 {id: 1, title: 'test1', createdAt: '2021-12-10T00:00:00.001Z'},
 {id: 2, title: 'test2', createdAt: '2021-12-11T00:00:00.001Z'},
 {id: 3, title: 'test3', createdAt: '2021-12-12T00:00:00.001Z'},
 {id: 4, title: 'test3', createdAt: '2021-12-12T00:00:00.001Z'},
]

上記のようなデータ構造があったときに、下記のようなデータ構造に整形する方法を知りたい。

理想のデータ構造

{
　　'2021-12-10': { marked: true },
　　'2021-12-11': { marked: true },
　　'2021-12-12': { marked: true },
　　'2021-12-13': { marked: true },
}

現状できていること

以下のようなコードで、配列型でそれっぽくは出来たのですが、上記のような「理想のデータ構造」にする方法が分からず困っています。

const arr = data.map((e) => {
  const created_at = moment(e.created_at).format('YYYY-MM-DD');
  return {
    [created_at]: { marked: true },
  };
});

console.log(arr);
/*
  Array [
    Object {
      "2021-12-10": Object {
        "marked": true,
      },
    },
    Object {
      "2021-12-11": Object {
        "marked": true,
      },
    },
    Object {
      "2021-12-12": Object {
        "marked": true,
      },
    },
    Object {
      "2021-11-01": Object {
        "marked": true,
      },
    },
    Object {
      "2021-12-13": Object {
        "marked": true,
      },
    },
  ],
*/

Answer 1

理想のデータ構造がオブジェクト(Object)であるのに対し、Array.prototype.map()は配列(Array)を返しますので、うまくいきません。ArrayをObjectに変換するか、直接Objectを作るようにする必要があります。

いろいろな方法がありますが、単純なものは次の四つだと思います。

1. Array.prototype.map()で各要素が[キー, 値]となるArrayに変換して、Object.fromEntries()でObjectに変換する。
2. 収納用の空Objectを用意し、for文でArrayを回しながらObjectにプロパティを入れていく。
3. 収納用の空Objectを用意し、Array.prototype.forEach()でArrayを回しながらObjectに値を入れていく。
4. Array.prototype.reduce()で初期値に空Objectを設定し、前のObjectにプロパティを足した新たなObjectを次々と作成しいく。

今のコードを生かすからな1.になると思います。

const obj = Object.fromEntries(data.map((e) => {
  const created_at = moment(e.created_at).format('YYYY-MM-DD');
  return [
    created_at,
    { marked: true },
  ];
}));

ただ、よく見るのは2.か3.でしょう。4.は一昔前に流行った関数型プログラミング風なのですが、ちょっと慣れてないと作れないと思いますので、サンプルを書いておきます。

const obj = data.reduce(
  (p, e) => ({ ...p, [moment(e.created_at).format('YYYY-MM-DD')]: { marked: true } }), 
  {}
);

Comments

[nanase21]

@raccyさん

ご教示頂きありがとうございます。
よく理解できました。
もしよければ、この場合の型定義方法についてもご教示いただけないでしょうか？

[raccy]

**質問の内容を大きく変えないでください。**

質問の内容が大きく変わってしまったため、この回答が全く意味不明な回答になってしまいました。別の質問があるのであれば、現在の質問を編集するのでは無く、新たに質問を投稿してください。

[nanase21]

申し訳ございませんでした。
質問内容を最初のものに戻しました。