So I am currently working with a JSON object containing an array of objects structured like this:
[
{
"id": 0,
"name": "Sophia Mason",
"availability": [
{
"date": 1522216800000,
"times": ["9:00 am", "2:30 pm", "5:00 pm", "6:00 pm"]
},
{
"date": 1522303200000,
"times": ["9:00 am", "2:30 pm", "5:00 pm", "6:00 pm"]
},
...
],
},
.........
]
Alongside this, I have another array created using moment.js, which holds a list of days like so:
[1522216800000, 1522303200000, 1522389600000]
My objective is to filter the availability of photographers based on each day in the date array and then accurately display each photographer's schedule on a calendar.
To achieve this, I am utilizing AngularJS at the client's request, aiming for a layout similar to the example shown below:
https://i.sstatic.net/O5VSO.png
While I have successfully rendered the days using Moment, I'm facing challenges in presenting each photographer's availability per day as illustrated in the provided calendar sample.
I've spent considerable time attempting various approaches, including references from similar queries on Stack Overflow such as:
Stack
Stack
Stack
After reviewing these resources, my current train of thought resides within the controller.js file as follows:
function setPhotographers() {
let photographer = photographers.filter((el) => {
el.availability.some((availability) => availability.date === today)
.map((el)=> {
console.log(el);
let newEl = Object.assign({}, el);
return newEl.availability.filter(availability => availability.date === today);
});
});
return photographer;
}
Despite actively learning, I find myself stuck in this process. Any insights or guidance shared would be highly appreciated! It would be immensely beneficial if you could also explain the rationale behind your solution to aid in my comprehension of the task at hand.
Thank you!