Nativescript UI not updating

Question

Playground: https://play.nativescript.org/?template=play-tsc&id=ZQ8J69&v=12

I seem to be unable to access array elements from my UI template. I'm trying to create a simple bingo card. In the UI if I do:

<Label text="{{ card }}" />

I get [object] as expected.

<Label text="{{ card.b }}" />

gives me [object], [object] (an array) as expected.

<Label text="{{ card.b[0] }}" />

I get nothing. As you can see from the console log, card.b[0] is definitely set.

I don't understand why my UI won't reflect what is in my observable objects/arrays

Answer 1

You are using ObservableArray, not simple array. You can not access item by its index simply. You will have to call getItem(index) in JavaScript. While in XML, it's possible you could directly do card.b._array[index] or write a converter function to get value from specific index.

FYI, ObservableArray is generally used to build the UI dynamically. You are statically building the UI, trying to access the index which may or may not exists. Use Repeater to loop through the array and build your UI based on whats available. If you are going to have more than 10 or 20 items in this array, I would suggest to go with ListView instead of Repeater.