如何使对象数组成为按天分组的对象？

Question

所以我有一个项目数组，每个项目都有一个日期（来自时刻库）和一些文本。

我能够成功地将其转换为对象的对象，但是如果两个或多个对象具有同一天，因为它被映射，它会用新的项目重写前一个项目。

我必须根据 YYYY-MM-DD 格式来组织对象的对象。

例如，items 数组在控制台登录时可能如下所示-

Array [
  Object {
    "date": 2019-08-06T19:10:00.000Z,
    "id": 0,
    "text": "Item1",
  },
  Object {
    "date": 2019-08-06T22:10:00.000Z,
    "id": 1,
    "text": "Item2",
  },
]

这是我用来将其转换为对象对象的代码

const calItemsArray = Object.assign({}, 
      ...this.props.items.map(item => 
        ({ [moment(item.date).format('YYYY-MM-DD')]: [{
          text: item.text, time: moment(item.date).format('h:mm a') }] 
        }))
      );
      console.log(calItemsArray);

这是控制台根据给定数据从 calItemsArray 记录的内容（两个项目具有相同的日期）

Object {
  "2019-08-06": Array [
    Object {
      "text": "Item2", //item one seems to be overwritten
      "time": "6:10 pm",
    },
  ],
}

我希望每个日期都包含具有该日期的所有文本和项目的时间。但是，如果一个已经存在，而不是将其添加到对象的日期数组中，它只是重写日期的对象本身。

Answer 1

答案：

使用reduce 函数代替Object.assign

const callItemsObject = this.props.items.reduce( ( acc, item ) => {
  let key = moment( item.date ).format( 'YYYY-MM-DD' ),
    payload = {
      text: item.text,
      time: moment( item.date ).format( 'h:mm a' )
    };

  ( acc[ key ] ) ? acc[ key ].push( payload ): ( acc[ key ] = [ payload ] );

  return acc;
}, {} );

      console.dir(calItemsObject);

示例说明：

现在您已经提供了数据模型，我已经创建了一些虚拟数据和一个示例。我们有 3 个日期和 5 条记录。

• 今天：两条记录（第 1 项和第 2 项）
• 5 天后：两条记录（第 3 项和第 5 项）
• 7 天后：一条记录​​（第 4 项）

这些将使用日期作为YYYY-MM-DD 格式的键推送到对象中。因为每天都有多条记录，如果要将日期用作键，则需要将它们存储到数组中，否则（就像您尝试使用Object.assign一样）键的值将被最新数据覆盖。

{
  items: [ {
    "date": moment(),
    "id": 0,
    "text": "Item1"
  }, {
    "date": moment(),
    "id": 1,
    "text": "Item2"
  }, {
    "date": moment().add( 7, 'days' ),
    "id": 2,
    "text": "Item3"
  }, {
    "date": moment().add( 5, 'days' ),
    "id": 3,
    "text": "Item4"
  }, {
    "date": moment().add( 7, 'days' ),
    "id": 4,
    "text": "Item5"
  } ]
}

---

示例：

注意：对于您说这不起作用的评论，通过运行此代码（未更改），我可以向您展示它确实，事实上，工作。如果您遇到问题，请随时发表评论，但您必须提供有关您的环境的更多信息。

let data = {items:[{"date": moment(),"id":0,"text":"Item1"},{"date": moment(),"id":1,"text":"Item2"},{"date": moment().add(7, 'days'),"id":2,"text":"Item3"}, {"date": moment().add(5, 'days'),"id":3,"text":"Item4"}, {"date": moment().add(7, 'days'),"id":4,"text":"Item5"}]};

function component(props) {
let component_proto = {};
component_proto.props = Object.assign({}, props);


component_proto.getTimes = function() {
      const callItemsObject = this.props.items.reduce( ( acc, item ) => {
      let key = moment( item.date ).format( 'YYYY-MM-DD' ),
        payload = {
          text: item.text,
          time: moment( item.date ).format( 'h:mm a' )
        };

      ( acc[ key ] ) ? acc[ key ].push( payload ): ( acc[ key ] = [ payload ] );

      return acc;
    }, {} );
   return callItemsObject;
}

return component_proto;
}


let result = component(data).getTimes();
  
  
  console.dir(result);

<script src="https://momentjs.com/downloads/moment.js"></script>