JSON Observable won't work properly

How-to Discussions
1

Hello!
I’m trying to get data from a JSON which contains a series of events (objects) assigned by a fetch function.

var MyEvents = Observable();
...
EventContext.getEvents(ThisUser.id, "mine").then(function(Events) { 
    MyEvents.value = Events;
};

Inside the returned promise, the Events variable returned is working perfectly:

console.log("First event name: " + Events[0].name);
//Prints "First event name: Party again"

While assigning Events to the MyEvents observable doesn’t seem to work. It doesn’t print anything at all, not even "First event name: "…
However, it does seem to be assigned something when printing the whole array by itself:

console.log("MyEvents: " + MyEvents);
//Prints "MyEvents: (observable) [object Object],[object Object],[object Object],[object Object]"

Then if I try to print first index of MyEvents:

console.log("MyEvents: " + MyEvents[0]);
//Prints "MyEvents: undefined"

Doing this:

<Each Items="{MyEvents}">
	<MyEventCard />
</Each>

Does not seem to do the trick either as it only spits out a single blank EventCard.
What is happening here? My understanding is that there should not be any difference in syntax between the two. Or am I missing something?

Thank you in advance!

2

If Events is an array then you can insert its elements into an observable list like this: MyEvents.replaceAll(Events);

Also, you can’t access an observable list like an array. E.g. this does not work: MyEvents[0]. Instead you use MyEvents.getAt(0)

You can read more about the observable API here: https://www.fusetools.com/docs/fusejs/observable-api

3

Thank you very much for the pointers :slight_smile: It worked now!