Pick items from Observable array with condition to fill another?

How-to Discussions
1

Hello!

I’ve been trying for a good hour or two now to simply extract certain items form an Observable array to populate other existing Observable arrays under certain conditions in seemingly every possible way without any luck.

First, I receive a JSON list from the web and put it in an observable

var AllEvents = Observable();

EventContext.getEvents(ThisUser.id, "upcoming").then(function(Events) {
    AllEvents.replaceAll(Events);
    ...
}

Then I want to extract the events which has the property “ongoing” which is either true or false into two separate lists; UpcomingEvents and OngoingEvents

var UpcomingEvents = Observable();
var OngoingEvents = Observable();

Now I have tried both

UpcomingEvents.replaceAll(AllEvents.where({ongoing: "false"}));
OngoingEvents.replaceAll(AllEvents.where({ongoing: "true"}));

and

UpcomingEvents.replaceAll(AllEvents.where(function(e){e.ongoing=="false"}));
OngoingEvents.replaceAll(AllEvents.where(function(e){e.ongoing=="false"}));

plus alot of other stuff including combining with .flatMap from the API and other forum posts without any success and I’m just wondering why?? Something tells me it doesn’t have to be that complicated…
Because using .value instead of .replaceAll seems to work but of course it puts the array inside an array again.

PLEASE HELP!!!

2

Hi Ferdinand,

.where and .flatMap are reactive Observable operators. That means that they are triggered when the original Observable you link them to changes. And they produce new Observables themselves.

Note that you also have to consume (e.g., by adding them to your module.exports and using them in UX) the new Observables for them to get calculated.

The docs on Observables give a pretty clear explanation on how all of this works, so make sure to read it carefully.

As for the code you posted, something like the following might just work:

var AllEvents = Observable();

EventContext.getEvents(ThisUser.id, "upcoming").then(function(Events) {
    AllEvents.replaceAll(Events);
    ...
}

var UpcomingEvents = AllEvents.where({ongoing: "false"});
var OngoingEvents = AllEvents.where({ongoing: "true"});

module.exports = {
	UpcomingEvents: UpcomingEvents,
	OngoingEvents: OngoingEvents
};

and in UX:

<Each Items="{UpcomingEvents}">
	<!-- ... -->
</Each>
<!-- ... -->
<Each Items="{OngoingEvents}">
	<!-- ... -->
</Each>

By looking at the code, we have to assume that your getEvents function returns an array of objects, and that those objects hold a property ongoing on the first level, and that the value of that property is a string true or false. If that is not true, adjust the statements accordingly.

3

I found a way around it using .remove(). But thanks anyway for the help, I will do this the next time!