How to properly map data?

Question

I'm working on a calendar app, which has an Agenda from "react-native-calendars". To display dates it needs the following:

items={{'2012-05-22': [{name: 'item 1 - any js object'}], ...}}

In my firebase backend I'm storing the start and end day of an appointment and also an array, which includes every day of it (so if the appointment started yesterday and ends tomorrow, the array stores yesterday, today and tomorrow as dates. The amount of dates in the array varies!)

The api data structure is the following:

apiData = [
          {data: {allDays: ["2021-08-18", "2021-08-19", "2021-08-20"],
                  start: "2021-08-18",
                  end: "2021-08-20"
                  },
           id: "string"},
          {data: {allDays: ["2021-08-20", "2021-08-21", "2021-08-22", "2021-08-23"],
                  start: "2021-08-20",
                  end: "2021-08-23"
                  },
           id: "string"},
           //more Data
           ]

I got the following code to map the documents:

let markedDayAll = {};

{apiData.map(({data: {start, end, allDays}}) => (
    markedDayAll[alldays] = [{
      start: start,
      end: end
    }]
  ))};

which outputs in the correct "items" format, but right now, obviously, it is displayed like this:

items={{
   '2021-08-18, 2021-08-19, 2021-08-20': [{start: "2021-08-18, end: "2021-08-20}]
   }}

But I need the following:

items={{
   '2021-08-18': [{start: "2021-08-18, end: "2021-08-20}],
   '2021-08-19': [{start: "2021-08-18, end: "2021-08-20}],
   '2021-08-20': [{start: "2021-08-18, end: "2021-08-20}]
   }}

How do I properly map the data, so I get the desired result?

Can you edit your question to show the value of `apiData` (as text, no screenshots please)? — Frank van Puffelen, Aug 19 '21 at 13:38

Hassan Imam · Accepted Answer · 2021-08-19T16:20:11.267

2

You can use array#reduce to iterate through each object and then iterate through each date in allDays and generate your object.

const apiData = [ {data: {allDays: ["2021-08-18", "2021-08-19", "2021-08-20"], start: "2021-08-18", end: "2021-08-20" }, id: "string"}, {data: {allDays: ["2021-08-20", "2021-08-21", "2021-08-22", "2021-08-23"], start: "2021-08-20", end: "2021-08-23" }, id:"string"} ],
      result = apiData.reduce((r, {data}) => {
        data.allDays.forEach(date => {
          r[date] ??= [];
          r[date].push({start: data.start, end: data.end});
        });
        return r;
      },{});
console.log(result);

edited Aug 19 '21 at 16:20

answered Aug 19 '21 at 14:12

Hassan Imam

21,956
5
41
51

This almost works as desired! What I'm stumbling across now is that it does not handle overlapping dates. In this example "2021-08-20" is used in both of the example apiData objects. In addition I just checked, that the "item" from "Agenda" only accepts this: `'2021-08-20': [{"start": "2021-08-18", "end": "2021-08-20"}, {"start": "2021-08-18", "end": "2021-08-20"}]` instead of `"2021-08-20": [{"start": "2021-08-18", "end": "2021-08-20"}, "2021-08-20": [{"start": "2021-08-20", "end": "2021-08-23"}`. Is there a way to modify your answer? Thank you alot! – CrypticalMindz Aug 19 '21 at 16:03
The update code will push new start and end date for repeating keys. – Hassan Imam Aug 19 '21 at 16:21
You sir, are a man of excellence! Thank you so much for this! – CrypticalMindz Aug 19 '21 at 17:34

How to properly map data?

1 Answers1