Strange JS behaviour

In this examples Im trying to find an item in the ‘list’ that contains a nested Observable with id:1. good_value enumeration works as expected but bad_value is not, also when debugging the x.nested.count breakpoint is never stops. Do I missing something, I want to use Observable.count insted of .toArray workaround

<App>
    <StackPanel>
        <JavaScript>
            var Observable = require("FuseJS/Observable");

            var list = Observable({id:100, nested: Observable({id:1, text: "11"}, {id:2, text: "2"})}, {id:100, nested: Observable({id:1, text: "11"}, {id:2, text: "2"})});

            var good_value = list.where(function(x){
                var array = x.nested.toArray();
                for (v in array)
                    if (array[v].id == 1)
                        return true;
                return false;
            }).count();

            var bad_value = list.where(function(x){
                var c = x.nested.count(function(y) {
                    debugger;
                    return y.id == 1;
                });
                debugger;
                return c > 0;
            }).count();

            module.exports =
            {
                good_value: good_value,
                bad_value: bad_value
            };        </JavaScript>

        <Text Value="{good_value}" />
        <Text Value="{bad_value}" />
    </StackPanel>
</App>

Hey lg, and thanks for your report!

Don’t forget that count returns an observable number, so return c > 0 is not meaningful there. Does it work if you change that to e.g. return c.map(function(d) { return d > 0; })?

Now it works, and the break-point beeing hit, thanks for the explanation :wink:

Didnt want to create another thread, but whats the difference between .expand() and manually adding items to the list. The result of this code is not the same, see test3

<App>
    <StackPanel>
        <JavaScript>
            var Observable = require("FuseJS/Observable");

            var data = [1,2,3];

            var test1 = Observable({id:'ok', list: Observable(data).expand()});
            var test2 = Observable({id:'ok', list: Observable()});
            for (i in data)
                test2.value.list.add(data[i]);

            var test3 = test1.map(function(x) { console.log(x.list); return JSON.stringify(x.list.toArray()); })
            var test4 = test2.map(function(x) { console.log(x.list); return JSON.stringify(x.list.toArray()); })

            module.exports = {
                test1: test1,
                test2: test2,

                test3: test3,
                test4: test4
            }
        </JavaScript>
        <Text Value="test1" />
        <Each Items="{test1.list}">
            <Text Value="{}" />
        </Each>

        <Text Value="test2" />
        <Each Items="{test2.list}">
            <Text Value="{}" />
        </Each>

        <Text Value="test3" />
        <Text Value="{test3}" />

        <Text Value="test4" />
        <Text Value="{test4}" />
    </StackPanel>
</App>

If you open a new thread it’s easier for other people that have the same question :slight_smile: I can see that there is some strange results here. I need to get back to you. I have filed an issue about this.

Thanks!