Loop through ListView for matching calendar selectedDate

Question

I am looking to populate a listView of events on the currently selectedDate of a calendar with data from an array(calendarListModel)

When a new date is selected from the calendar, I need the list to update, clearing and remaining empty if no events exist on the newly selected date, or replacing the listView with new delegates matching the newly selectedDate.

My array is created from a read from a firebase database, which works as intended. An example of my array would be;

calendarListModel: [
    {"date":2019-02-12,"name":"user1"},
    {"date":2019-02-13","name":"user1"},
    {"date":2019-02-12,"name":"user2"}
]

If I set my model as calendarListModel My list shows every database entry regardless of date on the listView.

I have tried things such as;

model: calendarListView.date(calendar.selectedDate

also using loops to access the data, which i have had no success with, and most recently the following example;

function updateEvents() {
                    var eventModel = calendarListModel.find(
                                function(obj){
                                return obj.date === calendar.selectedDate.getDate(),
                                console.log(JSON.stringify(obj));
                                }
                            );
                    if (eventModel === undefined)
                        return eventListModel.length = [];
                    return eventListModel.push(eventModel)
                }

Calendar {
        id: calendar
        selectedDate: new Date()

        onSelectedDateChanged: {
            const day = selectedDate.getDate();
            const month = selectedDate.getMonth() + 1;
            const year = selectedDate.getFullYear();
            updateEvents()
        }
    }

            ListView {
            id:eventListView
            model: eventListModel
        }

My console log from the JSON.stringify(obj) seems to split my array into individual objects, with the logs showing:

{"date":1549972800000,"name":"user1"} {"date":1550059200000,"name":"user1"} {"date":1549972800000,"name":"user2"}

but when doing this eventListView and eventModel remain blank?

What can i do to correct this or what direction to i need to work in?

Answer 1

The function you've passed into find is faulty.

function(obj) {
    return obj.date === calendar.selectedDate.getDate(),     // <-- oh no! lé comma!
        console.log(JSON.stringify(obj));
}

Note that you used the comma operator which, in JS, will throw away the expression on the left and return the result of the right (undefined here, since that's what console.log returns). A quick test on a JS console shows that this does not produce and return the desired results (a boolean in your case).

function comma() {
    return 1, console.log('blunder');
}
function noComma {
    console.log('success');
    return 1;
}

x = comma();    // blunder
y = noComma();  // success

console.log(x);  // undefined   //  but expected 1 ?!?
console.log(y);  // 1

You're probably after something like this:

function(obj) {
    console.log(JSON.stringify(obj));

    return obj.date === calendar.selectedDate.getDate();
}

However, this compares a... string (?) to an integer (returned by getDate()). You may want to instead do

return new Date(obj.date).getDate() === calendar.selectedDate.getDate();

This still logs obj while returning a boolean.

Read more about JavaScript's comma operator...