EDIT: Added extra code in the filterEvents snippet for more context.
I'm struggling to understand the behavior of my code. My goal is to pass an array into an action function within my Vuex store. However, when I return a Promise inside that action function, the parameter passed is not recognized as an Array but as an Object instead. This leads to the rejection error in the Promise.
Here is some code for reference:
filterEvents({ commit }, events) {
console.log(Array.isArray(events)); //this returns false
console.log(events);
return new Promise((resolve, reject) => {
if (!Array.isArray(events)) {
reject("Invalid argument: is not of type Array.");
}
let filtered = events.filter((event) => {
let now = new Date();
let event_stop = new Date(event.stop_time);
if (event_stop >= now || event_stop == null) {
return event;
}
});
resolve(filtered);
});
}
Here is where I call filterEvents; inside of getEvents;
getEvents({ state, commit, dispatch }, searchParams) {
.....
eventful.getEvents(searchParams).then(async (res) => {
.....
console.log(Array.isArray(res.data.events.event)); //this returns true
console.log(res.data.events.event);
/* where I call it */
await dispatch("filterEvents", res.data.events.event).then((res) => {
.....
});
}).catch((err) => {
.....
});
}
The Chrome developer console output shows the results. The first two outputs are from getEvents and the last two are from filterEvents
https://i.sstatic.net/UKZ35.png
I really need an explanation for this issue. It must be something minor, but at 3 a.m. my brain is struggling to understand why filterEvents is not recognizing the input as an Array.