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?

TrebledJ · Accepted Answer · 2019-02-25T16:12:35.470

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...

Hey @TrebuchetMS thanks for the response, both matching and missing dates are needed as they will either clear the list (non matching date) or create the `ListView` (matching date), I changed my code to your suggestion but receive no console log with the date or Boolean? when the selected date is changed (should trigger the function to do its job) the function is currently within `onSelectedDateChanged: {….}` part of my calendar, I am working with v-play(now Felgo) if that would make a difference? Thanks again — Ldweller, Feb 24 '19 at 23:58
Hi I've changed my last code snippet and removed the if-statement. Seems like you're wanting to log all objects. So far, it looks like a QML/JS -only problem (so V-Play/Felgo don't really make a difference)... unless you're having some other problem I'm not seeing... — TrebledJ, Feb 25 '19 at 00:10

Loop through ListView for matching calendar selectedDate

1 Answers1