Organize array of objects based on their respective dates

Question

Organize array of objects based on their respective dates

When fetching tasks from the API, I receive both active and completed tasks. My goal is to restructure this data to be compatible with SectionList in React-Native, organizing tasks based on their creation date (dataCadastro) so that they can be separated by day. You can refer to the documentation here: https://reactnative.dev/docs/sectionlist

{
  active: [
    {
      id: 1,
      dataCadastro: '2020-06-15T14:33:45.4807609+00:00',
      status: 1,
      description: '',
    },
    {
      id: 2,
      dataCadastro: '2020-06-15T15:33:45.4807609+00:00',
      status: 1,
      description: '',
    },
  ],
  completed: [
    {
      id: 3,
      dataCadastro: '2020-05-19T14:33:45.4807609+00:00',
      status: 1,
      description: '',
    },
    {
      id: 4,
      dataCadastro: '2020-05-19T15:33:45.4807609+00:00',
      status: 1,
      description: '',
    }
  ]
}

The desired outcome would look like this:

const dataTest = [
    {
      title: '2020-06-15', // All tasks for the 15th of June.
      data: [
        {
          id: 1,
          dataCadastro: '2020-06-15T14:33:45.4807609+00:00',
          status: 1,
          description: '',
        },
       {
          id: 2,
          dataCadastro: '2020-06-15T15:33:45.4807609+00:00',
          status: 1,
          description: '',
        }
      ],
    }, {...}  
  ];

javascript arrays react-native object

Answer 1

Answer №1

The initial step is to combine all the available information.

const combinedTasks = data.active.concat(data.completed);

Following that, you must organize them based on their respective dates.

const organizedData = combinedTasks.reduce((organizedData, task) => {
    const date = new Date(task.createdDate.toLocaleDateString());

    if (!organizedData[date]) organizedData[date] = { name: date, info: [] };
    organizedData[date].info.push[task];
    return organizedData;
}, {});

Finally, the structured data needs to be converted into an array and arranged chronologically.

const sortedData = Object.values(organizedData).sort((a, b) => a.title - b.title);

Answer 2

The initial step is to combine all the available information.

const combinedTasks = data.active.concat(data.completed);

Following that, you must organize them based on their respective dates.

const organizedData = combinedTasks.reduce((organizedData, task) => {
    const date = new Date(task.createdDate.toLocaleDateString());

    if (!organizedData[date]) organizedData[date] = { name: date, info: [] };
    organizedData[date].info.push[task];
    return organizedData;
}, {});

Finally, the structured data needs to be converted into an array and arranged chronologically.

const sortedData = Object.values(organizedData).sort((a, b) => a.title - b.title);

Answer 3

Answer №2

If the data within active and completed are similar in type, you can easily map it by extracting entries:

var obj = { active: [ { id: 1, dataCadastro: '2020-06-15T14:33:45.4807609+00:00', status: 1, description: '', }, { id: 2, dataCadastro: '2020-06-15T15:33:45.4807609+00:00', status: 1, description: '', }, ], completed: [ { id: 3, dataCadastro: '2020-05-19T14:33:45.4807609+00:00', status: 1, description: '', }, { id: 4, dataCadastro: '2020-05-19T15:33:45.4807609+00:00', status: 1, description: '', } ]};

var result = Object.entries(obj).map(([_,data])=>({title: data[0].dataCadastro, data }));

console.log(result);

Otherwise, if they are not of the same type, you can utilize reduce:

var obj = { active: [ { id: 1, dataCadastro: '2020-06-15T14:33:45.4807609+00:00', status: 1, description: '', }, { id: 2, dataCadastro: '2020-06-15T15:33:45.4807609+00:00', status: 1, description: '', }, ], completed: [ { id: 3, dataCadastro: '2020-05-19T14:33:45.4807609+00:00', status: 1, description: '', }, { id: 4, dataCadastro: '2020-05-19T15:33:45.4807609+00:00', status: 1, description: '', } ]};

var result = Object.entries(obj).reduce((acc, [_, data])=>{
  data.forEach(elem=>{
     title = elem.dataCadastro.slice(0,10)
     acc[title] = acc[title] || {title, data:[]};
     acc[title].data.push(elem);
   });
 return acc;
},{});

console.log(Object.values(result));

Answer 4

If the data within active and completed are similar in type, you can easily map it by extracting entries:

var obj = { active: [ { id: 1, dataCadastro: '2020-06-15T14:33:45.4807609+00:00', status: 1, description: '', }, { id: 2, dataCadastro: '2020-06-15T15:33:45.4807609+00:00', status: 1, description: '', }, ], completed: [ { id: 3, dataCadastro: '2020-05-19T14:33:45.4807609+00:00', status: 1, description: '', }, { id: 4, dataCadastro: '2020-05-19T15:33:45.4807609+00:00', status: 1, description: '', } ]};

var result = Object.entries(obj).map(([_,data])=>({title: data[0].dataCadastro, data }));

console.log(result);

Otherwise, if they are not of the same type, you can utilize reduce:

var obj = { active: [ { id: 1, dataCadastro: '2020-06-15T14:33:45.4807609+00:00', status: 1, description: '', }, { id: 2, dataCadastro: '2020-06-15T15:33:45.4807609+00:00', status: 1, description: '', }, ], completed: [ { id: 3, dataCadastro: '2020-05-19T14:33:45.4807609+00:00', status: 1, description: '', }, { id: 4, dataCadastro: '2020-05-19T15:33:45.4807609+00:00', status: 1, description: '', } ]};

var result = Object.entries(obj).reduce((acc, [_, data])=>{
  data.forEach(elem=>{
     title = elem.dataCadastro.slice(0,10)
     acc[title] = acc[title] || {title, data:[]};
     acc[title].data.push(elem);
   });
 return acc;
},{});

console.log(Object.values(result));

Organize array of objects based on their respective dates

Answer №1

Answer №2

Similar questions

Selenium Python option other than using send_keys()

recurring issues with time outs when making ajax requests

The parameter type 'Function' cannot be assigned to the parameter type 'ComponentType<never>'

Tools for diagnosing WebGL Three.js issues

Issue with Promise rejection not being caught in Node.js with ExpressNode.js and Express are not

Adding elements to a JSON array in Javascript

Identifying modifications to the content of a text area

Traversing through objects in react.js

The Bootstrap CDN is malfunctioning and displaying errors in the console

Instructions on how to implement a readmore button for texts that exceed a specific character length

Detailed steps on extracting values from an asynchronous function for individual elements of an array, followed by utilizing the retrieved values to display content in a JSX component within a React application

Utilizing AngularJS for Managing JSON Data

What is the best way to send a request in a route and wait to return a response until the data is ready?

Retrieving the value from a textbox within a Bootstrap modal in real-time

Using the onclick event with an image created through PHP code

Receive alerts from flash document within html

quiz stuck on last step due to xmhttp redirection problem

Ensuring that undefined is not present before making an API request is crucial in the componentWillMount lifecycle

'Sys is not defined' JavaScript error

Locating the minimum position, arranging, and exchanging elements in a two-dimensional array using C++