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?
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);