javascript - 按日期对对象值进行分组

标签 javascript reactjs react-native object

我正在尝试在 React Native 上举办即将举行的事件,我有这个对象

const calendatData = [
        {
            "data": [
              {
                "id": 25,
                "title": "Spotify",
                "name": "Family",
                "service_id": 1,
                "repetition": "Monthly",
                "price": "79000",
                "upcoming_date": [
                  "2020-08-07T13:35:44.606Z"
                ]
              },
              {
                "id": 26,
                "title": "Netflix",
                "name": "Mobile",
                "service_id": 2,
                "repetition": "Monthly",
                "price": "49000",
                "upcoming_date": [
                  "2020-08-18T13:35:44.600Z",
                  "2020-08-07T13:35:44.606Z"
                ]
              },
              {
                "id": 27,
                "title": "iTunes",
                "name": "Weekly Special",
                "service_id": 3,
                "repetition": "Weekly",
                "price": "22000",
                "upcoming_date": [
                  "2020-08-07T13:35:44.606Z",
                  "2020-08-14T13:35:44.606Z",
                  "2020-08-21T13:35:44.606Z",
                  "2020-08-28T13:35:44.606Z"
                ]
              }
            ],
            "status": "success"
          }
    ]

我一直在尝试做的是根据upcoming_date提取该对象。 我需要的结果是这样的

upcomingData = [
        {
            date: '2020-08-07',
            title: [
                'Spotify',
                'Netflix',
                'iTunes'
            ]
        },
        {
            date: '2020-08-18',
            title: ['Netflix']
        },
        {
            date: '2020-08-14',
            title: ['iTuunes']
        },
        {
            date: '2020-08-21',
            title: ['iTuunes']
        },
        {
            date: '2020-08-28',
            title: ['iTuunes']
        }
]

在同一日期,如果有多个标题,应将其分组到对象中的同一日期下。

相反,我得到的是这个对象

upcomingData = [
    {
        title: [
            "Spotify",
            "Netflix",
            "iTunes",
        ],
        date : [
            "2020-08-29",
            "2020-08-07",
            "2020-08-18",
            "2020-08-07",
            "2020-08-07",
            "2020-08-14",
            "2020-08-21",
            "2020-08-28",
        ]
    }
]

我对此很陌生,我知道这主要是关于 javascript 知识,任何帮助将不胜感激。

谢谢

最佳答案

想法是:

  • 首先,通过 Array.prototype.map() 迭代您的对象并根据转换后的日期设置唯一的 map 键。
  • 然后将标题推送到每个 map 的键。

实际上您的最终 map (这里是myMap)将是您期望的upcomingData。要输出为您期望的对象,您可以按照自己的方式制作。

const calendarData = [{ "data": [{ "id": 25, "title": "Spotify", "name": "Family", "service_id": 1, "repetition": "Monthly", "price": "79000", "upcoming_date": ["2020-08-07T13:35:44.606Z"] }, { "id": 26, "title": "Netflix", "name": "Mobile", "service_id": 2, "repetition": "Monthly", "price": "49000", "upcoming_date": ["2020-08-18T13:35:44.600Z", "2020-08-07T13:35:44.606Z"] }, { "id": 27, "title": "iTunes", "name": "Weekly Special", "service_id": 3, "repetition": "Weekly", "price": "22000", "upcoming_date": ["2020-08-07T13:35:44.606Z", "2020-08-14T13:35:44.606Z", "2020-08-21T13:35:44.606Z", "2020-08-28T13:35:44.606Z"] }], "status": "success" }];

var myMap = new Map();

calendarData[0].data.map(element => {

    var dates = [];

    element.upcoming_date.map(date => {

        var upcoming_date = date.slice(0,10);

        if (!myMap.get(upcoming_date)) {
            myMap.set(upcoming_date, []);
        }

        dates.push(upcoming_date);

    });

    var len = dates.length;

    for (let i = 0; i < len; i++) {
        myMap.get(dates[i]).push(element.title);
    }
});

var upcomingData = [];

for (const entry of myMap.entries()) {
    var obj = {};
    obj["date"] = entry[0];
    obj["title"] = entry[1];
    upcomingData.push(obj);
}

console.log(upcomingData);

关于javascript - 按日期对对象值进行分组,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62923017/

相关文章:

javascript - 单击按钮后动态生成 html 页面的内容

javascript - 为什么在 IOS 上选择 List.Accordion 时会以白色突出显示?

javascript - 如何在JavaScript中使map函数的键值对每个元素递增

javascript - 获得正确的日期,但是当我推送到我的月份数组时,我得到奇怪的日期输出

javascript - 如何在 javascript 类完成后获得最终响应

javascript - 使用 onchange 事件更新状态有一个延迟字符

javascript - 在 React Native 中加载图像时如何获取响应 header ?

javascript - 如何在 React native 中获取 TextInput 相对于其父级或屏幕的光标位置

android - Netinfo.isConnected.fetch() 返回真

javascript - tinyMCE插件访问元素