How to create new array of object with new key in each object for section list

Question

I have some feature to develop.

I have array with data that contains tasks. Each task have taskEndDate key with value formatted as ( YYYY-MMM-DD ) and it looks like :

[
    {
        "id": "1616193050660",
        "isExpired": false,
        "isFinished": false,
        "subTasks": [
            "Voda redbull ",
            "Wiskey Coca-Cola "
        ],
        "taskCreationDate": "2021-Jun-12",
        "taskEndDate": 2021-Jun-15,
        "taskTitle": "Drink somethig",
        "taskType": "BAR"
    },
    {
        "id": "1616193050660",
        "isExpired": false,
        "isFinished": false,
        "subTasks": [
            "Voda redbull ",
            "Wiskey Coca-Cola "
        ],
        "taskCreationDate": "2021-Jun-12",
        "taskEndDate": 2021-Jun-15,
        "taskTitle": "Drink somethig",
        "taskType": "BAR"
    },
 {
        "id": "1616193050660",
        "isExpired": false,
        "isFinished": false,
        "subTasks": [
            "Voda redbull ",
            "Wiskey Coca-Cola "
        ],
        "taskCreationDate": "2021-Jun-13",
        "taskEndDate": 2021-Jun-18,
        "taskTitle": "Drink somethig",
        "taskType": "BAR"
    }
]

I need to create new array of object that will in next format.

newArray = [{
    title: taskEndDate,
    data: all tasks that contain same taskEndDate as title
}];

As you can see, the taskEndDate can be same value in few tasks, so I won't to render the title each times, but only once.

For now , I'm doing it hardcoded and then putting the sortedData to <SectionList/>:

const sortedData = [
        {
            title: 'Previous',
            data: data.filter((task) => moment().format('YYYY-MM-DD') > moment(task.taskEndDate).format('YYYY-MM-DD')),
        },
        {
            title: `Today - ${moment().format('MMMM-DD')}`,
            data: data.filter((task) => moment().format('YYYY-MM-DD') === moment(task.taskEndDate).format('YYYY-MM-DD')),
        },
        {
            title: 'Tomorrow',
            data: data.filter((task) => moment().add(1, 'd').format('YYYY-MM-DD') === moment(task.taskEndDate).format('YYYY-MM-DD')),
        },
        {
            title: moment().add(2, 'd').format('YYYY-MM-DD'),
            data: data.filter((task) => moment().add(2, 'd').format('YYYY-MM-DD') === moment(task.taskEndDate).format('YYYY-MM-DD')),
        },
        {
            title: 'Future',
            data: data.filter((task) => moment().add(2, 'd').format('YYYY-MM-DD') < moment(task.taskEndDate).format('YYYY-MM-DD')),
        },
    ];

How can I do it generic ti all dates?

Show a small example of the data format you expect as a result. The one shown above doesn't contain enough information. For example: *data: all tasks that contain same taskEndDate as title*. Does that include subtasks too? — Ivan86, Mar 21 '21 at 10:32

score 2 · Answer 1 · answered Mar 21 '21 at 12:53

Let's consider the data array is sorted by the taskEndDate, then we can achieve grouping the data by taskEndDate as below:

const data = [{..}, {...}] // data array sorted by `taskEndDate`. If not needs to sort the array by taskEndDate before running the forEach loop

let sortedData = []
let length = 0 // length of sortedData

data.forEach(task => {
  if(sortedData[length - 1] && task.taskEndDate === sortedData[length - 1].title){
    sortedData[length - 1].data.push(task);
  }
  else{
    sortedData.push({title: task.taskEndDate, data: [task] })
    ++length;
  }
})

console.log(sortedData)

Output:

[
  {
    title: '2021-Jun-15',
    data: [
      {
        id: '1616193050660',
        ...,
        taskCreationDate: '2021-Jun-12',
        taskEndDate: '2021-Jun-15',
      },
      {
        id: '1616193050660',
        ...,
        taskCreationDate: '2021-Jun-12',
        taskEndDate: '2021-Jun-15',
      }
    ]
  },
  {
    title: '2021-Jun-18',
    data: [
      {
        id: '1616193050660',
        ...,
        taskCreationDate: '2021-Jun-13',
        taskEndDate: '2021-Jun-18',
      }
    ]
  }
]

score 0 · Answer 2 · answered Mar 21 '21 at 10:33

0

I'm not sure if this is what you want. Let me know if this is what you want.

  const data = [
    {
      id: "1616193050660",
      isExpired: false,
      isFinished: false,
      subTasks: ["Voda redbull ", "Wiskey Coca-Cola "],
      taskCreationDate: "2021-Jun-12",
      taskEndDate: "2021-Jun-15",
      taskTitle: "Drink somethig",
      taskType: "BAR",
    },
    {
      id: "1616193050660",
      isExpired: false,
      isFinished: false,
      subTasks: ["Voda redbull ", "Wiskey Coca-Cola "],
      taskCreationDate: "2021-Jun-12",
      taskEndDate: "2021-Jun-15",
      taskTitle: "Drink somethig",
      taskType: "BAR",
    },
    {
      id: "1616193050660",
      isExpired: false,
      isFinished: false,
      subTasks: ["Voda redbull ", "Wiskey Coca-Cola "],
      taskCreationDate: "2021-Jun-13",
      taskEndDate: "2021-Jun-18",
      taskTitle: "Drink somethig",
      taskType: "BAR",
    },
  ];
  const sortedData = data.map((data_) => {
    return {
      title: data_.taskEndDate,
      data: data.filter((_task) => data_.taskEndDate === _task.taskEndDate),
    };
  });
  console.log(sortedData);

answered Mar 21 '21 at 10:33

crispengari

7,901
7
45
53

1

Hi @CrispenGari, It's not working as well, Now , each time I'm adding new task with same taskEndDay, new Section created with same tasks. – Michael Mar 21 '21 at 10:37
Probably it's because im not getting what you asked. What do you expect as output? – crispengari Mar 21 '21 at 10:45
I will try. to explain again: I need to create new array of object with to keys : first key will be title with taskEndDate with value of task.taskEndDate. the second key will be array of objects , lets call it data: the data will contain all tasks as objects with taskEndDate as in title. Now, if i create new task with taskEndDate the already exist , I wan't render the title again, but only insert it to exist object. I home you got it better now – Michael Mar 21 '21 at 10:51
I get what you asked now i think the answer you are looking for can be found here: https://stackoverflow.com/questions/30025965/merge-duplicate-objects-in-array-of-objects – crispengari Mar 21 '21 at 11:36
Hi @Crispen Gari again. Please see my answer – Michael Mar 21 '21 at 12:27

score 0 · Answer 3 · answered Mar 21 '21 at 12:27

Ok, I fixed it within the next way :

const getSortedArrayWithTitles = () => {

        if (data.length) {
            let sortedArray = [
                {
                    title: moment(data[0].taskEndDate).format(appConfig.DAYS_FORMAT),
                    data: data.filter((task) => moment(task.taskEndDate).format(appConfig.DAYS_FORMAT) === moment(data[0].taskEndDate).format(appConfig.DAYS_FORMAT))
                }
            ];

            for (let i = 0, j = 0; i < data.length; i++) {
                if (!sortedArray[j].title.includes(moment(data[i].taskEndDate).format(appConfig.DAYS_FORMAT))) {
                    sortedArray.push(
                        {
                            title: moment(data[i].taskEndDate).format(appConfig.DAYS_FORMAT),
                            data: data.filter((task) => moment(task.taskEndDate).format(appConfig.DAYS_FORMAT) === moment(data[i].taskEndDate).format(appConfig.DAYS_FORMAT))
                        }
                    );
                    j++;
                }
            }
            return sortedArray;
        }
    };

I'm pretty sure that it is not a best way to use for loop, but It's working fine. Maybe you guys have a better way?

How to create new array of object with new key in each object for section list

3 Answers3