Transform array of objects into object that contains an array of objects (Complex)

Question

I am working with React Native Calendars and attempting to structure my data for the agenda component.

The expected data structure is (an Object)

{
 '2012-05-22': [{text: 'item 1 - any js object'}],
 '2012-05-23': [{text: 'item 2 - any js object'}],
 '2012-05-24': [],
 '2012-05-25': [{text: 'item 3 - any js object'},{text: 'any js object'}],
}`

When fetching events from my api, the events are returned in the following format (an array of Objects)`

 let eventsFetchedFromApi = [
  {startDateTime:"2018-02-01T11:10:43", comments: "First Event"},
  {startDateTime:"2018-03-01T11:12:43", comments: "Third Event"},
  {startDateTime:"2018-02-01T11:18:43", comments: "Second Event"},
 ]`

I have managed to use the following code to turn my arrray of objects into an object (unfortunately it is not very readable, atleast not to me).

let transformedEvents = Object.assign(...eventsFetchedFromApi.map(({ startDateTime, comments }) => ({ [startDateTime.substring(0, 10)]: [{comments: [comments]}] })));

The Structure of 'transformedEvents' is (ALMOST THERE)

{
"2018-02-01":[{"comments": ["First Event"]}],
"2018-03-01":[{"comments": ["Third Event"]}]
}

As you can see above, only 2 out of 3 events are displayed. If the events have the same date only one will be displayed. My desired output is

{
"2018-02-01":[{"comments": "First Event"}, {"comments": "Second Event"}],
"2018-03-01":[{"comments": "Third Event"}]
}

**I need events that have the same date to be grouped together. Can anyone assist me with getting my desired data structure? I am not sure how to solve this one. Thanks **

Your desired output has the second event in "2018-02-01" but in eventsFetchedFromApi the second event has startDateTime of "2018-03-01T...? — CertainPerformance
– CertainPerformance, Commented Jun 2, 2018 at 6:47

CertainPerformance · Accepted Answer · 2018-06-02 06:43:51Z

1

You can use reduce to group an array of objects into a single object indexed by the date string. You can't use map if the input and output items aren't one-to-one, as in your case.

const eventsFetchedFromApi=[{startDateTime:"2018-02-01T11:10:43",comments:"First Event"},{startDateTime:"2018-03-01T11:12:43",comments:"Second Event"},{startDateTime:"2018-02-01T11:18:43",comments:"Third Event"}];
const output = eventsFetchedFromApi.reduce((a, { startDateTime, comments }) => {
  const prop = startDateTime.slice(0, 10);
  if (!a[prop]) a[prop] = [];
  a[prop].push({ comments });
  return a;
}, {});
console.log(output);

answered Jun 2, 2018 at 6:43

CertainPerformance

373k55 gold badges354 silver badges359 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

amrender singh · Accepted Answer · 2018-06-02 06:49:04Z

0

Try the following:

var arr1 = [
  {startDateTime:"2018-02-01T11:10:43", comments: "First Event"},
  {startDateTime:"2018-03-01T11:12:43", comments: "Second Event"},
  {startDateTime:"2018-02-01T11:18:43", comments: "Third Event"},
 ];
 var result = {};
 
 arr1.forEach(function(obj){
 var date = obj.startDateTime.slice(0,10); 
  if(!result[date])
    result[date] = [];
   result[date].push({"comments" : obj.comments});
 });
 console.log(result);

answered Jun 2, 2018 at 6:49

amrender singh

8,2594 gold badges27 silver badges30 bronze badges

Comments

Nishant Dixit · Accepted Answer · 2018-06-02 06:51:42Z

var resultObject = {};
let eventsFetchedFromApi = [{
        startDateTime: "2018-02-01T11:10:43",
        comments: "First Event"
    },
    {
        startDateTime: "2018-03-01T11:12:43",
        comments: "Second Event"
    },
    {
        startDateTime: "2018-02-01T11:18:43",
        comments: "Third Event"
    },
]

eventsFetchedFromApi.forEach((val) => {
    let date = val.startDateTime.split("T")[0];
    resultObject[date] = resultObject[date] || {};
    resultObject[date].startDateTime = val.startDateTime;
    resultObject[date].comments = resultObject[date].comments || []
    resultObject[date].comments.push({
        comments: val.comments
    });
});
const finalResultArray = Object.values(resultObject);
console.log(finalResultArray);

KooiInc · Accepted Answer · 2018-06-02 07:39:53Z

0

Would this reducer do what you want?

const dt2Date = dateStr => dateStr.split("T")[0];
const createOrPush = (obj, key, value) => obj[key] 
  ? obj[key].push(value) && obj[key] 
  : [].concat(value);
const reducer = (redo, {startDateTime, comments}) => 
  Object.assign( redo, { [dt2Date(startDateTime)]: 
    createOrPush(redo, dt2Date(startDateTime), {comments: comments}) });

const array2Convert = [
  {startDateTime:"2018-02-01T11:10:43", comments: "First Event"},
  {startDateTime:"2018-03-01T11:12:43", comments: "Third Event"},
  {startDateTime:"2018-02-01T11:18:43", comments: "Second Event"},
];

console.log(array2Convert.reduce( reducer, {} ));

edited Jun 2, 2018 at 7:39

answered Jun 2, 2018 at 7:15

KooiInc

124k32 gold badges145 silver badges181 bronze badges

Collectives™ on Stack Overflow

Transform array of objects into object that contains an array of objects (Complex)

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related